コンテンツボックスのCSS指定による挙動を試してみました
ウェブブラウザはコンテンツをレンダリングするのにボックスとして配置している
それで、実際に挙動を試してみました
これは、コンテンツとコンテンツボックスの関係を明確にするために試しました
- pタグでテキストコンテンツ、それを配置するコンテンツボックスを作成
- marginは、ボックスの外の空間に配置されるので、0pxとします
- borderでボックスの境界を1pxで表示
- paddingは0pxに設定
次にコンテンツボックスのheightプロパティで高さを変えてコンテンツとの関係を調べます
HTML
<body>
<p class="p001">コンテンツボックス</p>
<p class="p002">下のコンテンツ</p>
</body>
CSS
body {
margin: 10px;
width: 500px;
}
.p001 {
font-size: 32px;
margin: 0px;
padding: 0px;
border: 1px solid;
background-color: antiquewhite;
height: 0px; /* ← ここを変更します */
}
.p002 {
font-size: 48px;
font-weight: bold;
margin: 0px;
border: 1px solid;
background-color: aqua;
}
・height: auto;

ー--------ー--------ー---------
・height: 32px;

ー--------ー--------ー--------
・height: 16px;

ー--------ー--------ー--------
・height: 0px; コンテンツボックスの高さはボーダーの2px

上記のことから、コンテンツボックスの高さはauto か 100% などの相対値が良さそうです
コメント