なぜ青いボックスの上にスペースがありますか？

Question

いくつかのdivを作成したいと思います。 2つのdivを並べて配置した後、次のdivには前にスペースがあります。そこにはいけません。

なぜ青いdivの前にスペースがありますか？画像を確認してください、担当者が少ないため画像を直接追加できません。

レイアウトを描画するには、より良い方法がありますか？

私は初心者です。

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

inline-blockは、テキストがするようdefautにより、ベースラインの上に立っているので。

参照：https://www.w3.org/wiki/CSS/Properties/vertical-align

垂直-alignプロパティは、インラインレベル要素によって生成されたボックスの行ボックス内の垂直配置に影響を与えます。

説明

値baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit。

初期値

はあなたが彼らのvertical-aligntopにをリセットするのであればん

を継承インラインレベルと 'テーブル・セル'

要素に適用されベースラインまたはbottomなどの文字に必要なテキストで使用されるギャップを消去します。

あなたはまた、約line-heightを読むことをお勧めします（デフォルト値はフォントサイズの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>

私はそれが正常に動作し、上部と下部の使用各ボックスが同じ高さを持つため、どちらか一方を使用するのが最も良いのです