Warum gibt es einen Raum über der blauen Box?

Question

Ich möchte einige Divs erstellen; aber nachdem zwei divs nebeneinander platziert wurden, hat das nächste div platz davor. Es sollte nicht da sein.

Warum ist der Raum vor blau Div dort? Überprüfen Sie das Bild, ich kann das Bild nicht direkt hinzufügen, da der Rep-Wert geringer ist.

Gibt es einen besseren Weg, dieses Layout zu zeichnen?

Ich bin ein Anfänger.

OUTPUT

Image of layout

div { 
 
    color: green; 
 
    height: 80px; 
 
    width: 400px; 
 
    border: thin solid #333; 
 
} 
 

 
#redbox { 
 
    height: 80px; 
 
    width: 200px; 
 
    background-color: red; 
 
} 
 

 
#yellowbox { 
 
    height: 80px; 
 
    width: 80px; 
 
    margin-right: 12px; 
 
    background-color: yellow; 
 
    display: inline-block; 
 
} 
 

 
#greenbox { 
 
    height: 80px; 
 
    width: 100px; 
 
    background-color: green; 
 
    display: inline-block; 
 
} 
 

 
#bluebox { 
 
    height: 80px; 
 
    width: 200px; 
 
    background-color: blue; 
 
}

<div>GOOGLE</div> 
 
<div id="redbox"></div> 
 
<div id="yellowbox"></div> 
 
<div id="greenbox"></div> 
 
<div id="bluebox"></div>

Answer 1

weil inline-block steht auf Basislinie von defaut wie der Text der Fall ist.

Siehe: https://www.w3.org/wiki/CSS/Properties/vertical-align

Die vertical-align Eigenschaft wirkt sich auf die vertikale Positionierung innerhalb einer Zeilenfeld der von einem Inline-Ebene Element erzeugt Boxen.

Beschreibung

Wertebaseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit.

Anfangswert Baseline

Gilt für Inline-Ebene und 'table-cell'

Elemente Vererbt Kein

Also, wenn Sie ihre vertical-align-top zurückgesetzt oder bottom wird diese Lücke gelöscht, die von Text benötigt wird, der für Buchstaben wiebenötigt wird.

Sie könnten auch über line-height lesen möchten (Standardwert ist durchschnittlich Satz von font-size X 1.2 = 1.2em)

div { 
 
    color: green; 
 
    height: 80px; 
 
    width: 400px; 
 
    border: thin solid #333; 
 
} 
 

 
#redbox { 
 
    height: 80px; 
 
    width: 200px; 
 
    background-color: red; 
 
} 
 

 
#yellowbox { 
 
    height: 80px; 
 
    width: 80px; 
 
    margin-right: 12px; 
 
    background-color: yellow; 
 
    display: inline-block; 
 
    vertical-align:top; 
 
} 
 

 
#greenbox { 
 
    height: 80px; 
 
    width: 100px; 
 
    background-color: green; 
 
    display: inline-block; 
 
    vertical-align:bottom; 
 
} 
 

 
#bluebox { 
 
    height: 80px; 
 
    width: 200px; 
 
    background-color: blue; 
 
}

<div>GOOGLE</div> 
 
<div id="redbox"></div> 
 
<div id="yellowbox"></div> 
 
<div id="greenbox"></div> 
 
<div id="bluebox"></div>

i oben und unten verwendet, es funktioniert gut weil jede Box die gleiche Höhe hat, ist es am besten, das eine oder das andere