はじめに
CSSを勉強してて、ボックスモデルを説明できるように簡単にまとめてみました。
コンテントボックスとは
実際の横幅と高さ
基本はwidthとheight
html
<div class="box">ボックススタイルブロック</div>
css
.box {
/* background-color: green; */
/* Content Box*/
width: 200px;
height: 200px;
}
パディングボックスとは
コンテントボックスから外側までどのくらい空けるか
padding:上 右 左 下の順で書く(ショートハンドという)
html
<div class="box">ボックススタイルブロック</div>
css
.box {
background-color: green;
/* Padding Box */
padding: 8px 10px 15px 30px;
}
マージンボックスとは
他の要素からどのくらい空けるか
html
<div class="box">ボックススタイルブロック</div>
css
.box {
background-color: green;
/* Margin Box */
margin: 8px 10px 15px 30px;;
}
マージンの相殺とは
マージが重なると値が大きいほうが優先される
下記のコードの場合margin-topの値が大きいため、margin-top: 40px;が適用される
html
<div class="box">ボックススタイルブロック</div>
<div class="margin">マージン相殺用の説明のブロック</div>
css
.box {
background-color: green;
margin-bottom: 20px;
}
.margin {
background-color: blue;
margin-top: 40px;
}
ボーダーボックスとは
border: 先の太さ 線の種類 線の色と書く
html
<div class="box">ボックススタイルブロック</div>
css
.box {
background-color: green;
/* Content Box*/
width: 200px;
height: 200px;
/* Border Box */
border: 5px solid black;
}
Box-Sizing プロパティについて
ボーダーとパディングの値が加わって、実際の指定した値よりも大きくなることがある。これは、直感的ではないのでBox-Sizing プロパティを使うと良い
Box-Sizingプロパティをつかうとwidthとheightで指定した大きさになる
MDNのドキュメント CSS ボックスモデルの代替
html
<div class="box">ボックススタイルブロック</div>
css
.box {
background-color: green;
/* Content Box*/
width: 200px;
height: 200px;
/* Padding Box*/
padding: 8px 10px 15px 30px;
/* Margin Box */
margin: 8px 10px 15px 30px;
box-sizing: border-box;
}
↧