コンテンツボックス

HTML&CSS

コンテンツボックスの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: auto;

ー--------ー--------ー---------

・height: 32px;

・height: 32px;

ー--------ー--------ー--------

・height: 16px;

・height: 16px;

ー--------ー--------ー--------

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

・height:  0px;

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

コメント