Ausrichten divs vertikal ohne Raum zwischen ihnen

Question

<div style="border:8px solid purple;height:500px;position:relative;"> 
 
    <div style="display:inline-block;bottom:0;width:100%;position:absolute;border:5px solid black;"> 
 
    <div style="display:inline-block;border:1px solid red;width:100%;position:relative;"> 
 
     TEXT INSIDE RED BORDER DIV 
 
    </div> 
 
    <div style="display:inline-block;border:4px solid yellow;height:20px;width:100%;position:relative;transform:translateY(50%);"> 
 
     TEXT INSIDE YELLOW BORDER DIV 
 
    </div> 
 
    <div style="display:inline-block;border:4px solid blue;height:50px;width:100%;"> 
 

 
    </div> 
 
    </div> 
 
</div>

Ich möchte keinen Raum zwischen div, die "TEXT INSIDE RED BORDER DIV" Text nach innen und div hat, die „TEXT INSIDE YELLOW BORDER DIV hat " Innerhalb. Aber zwischen ihnen ist ein Abstand. Es scheint, dass transform:translateY(50%); dies tun.

Warum bewegt sich das rote div nicht automatisch nach unten und verursacht dadurch Platz zwischen gelb div?

Answer 1

entfernen transform: translateY(50%); von Ihrem gelb umrandeten div, wird es

<div style="border:8px solid purple;height:500px;position:relative;"> 
 
    <div style="display:inline-block;bottom:0;width:100%;position:absolute;border:5px solid black;"> 
 
    <div style="display:inline-block;border:1px solid red;width:100%;position:relative;"> 
 
     TEXT INSIDE RED BORDER DIV 
 
    </div> 
 
    <div style="display:inline-block;border:4px solid yellow;height:20px;width:100%;position:relative;"> 
 
     TEXT INSIDE YELLOW BORDER DIV 
 
    </div> 
 
    <div style="display:inline-block;border:4px solid blue;height:50px;width:100%;"> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 2

Der Stift den Raum entfernt verknüpft ist nicht einmal der gleiche Code, sorry, aber wir können viel nicht helfen ohne das.

Aber vielleicht wird dies Ihre Probleme lösen, in CSS die Inline-Block-Eigenschaften Element nach dem anderen setzen, aber einen Platz aufgrund der Schriftgröße lassen.

Wenn Sie die Schriftgröße auf alle Elemente auf: 0 und Neueinstellung die richtige Schriftgröße in dem Raum div weggeht (normalerweise)