CSSのブロックレベル要素とインライン要素の違いです。
目次
サンプル | ブロックレベル要素 |
インライン要素 | |
インライン要素+ブロックレベル要素 |
ブロックレベル要素
- ブロックレベル要素を続けて記述した場合、画面上は縦に並びます。
- 主なタグとしてdiv,p,h1,h2,table,form等があります。
- widthとheightで幅と高さを指定できます。
- marginは、上下左右効きます。
ブロックレベル要素のサンプルです。
<style>
.box1 div {
width: 100px;
height: 50px;
margin: 20px 20px 20px 20px;
background-color: #f5deb3;
}
</style>
<div class="box1">
<div>abc</div>
<div>abc</div>
<div>abc</div>
</div>
10~12行目は、ブロックレベル要素のdivタグが続いています。
画面に表示すると縦に並びます。
3,4行目にwidthとheightがあり反映されます。
5行目のmarginは、上下左右効きます。
以下は実行結果のイメージです。
インライン要素
- インライン要素を続けて記述した場合、画面上は横に並びます。
- 主なタグとしてspan,a,img,input等があります。
- widthとheightで幅と高さを指定できません。(img,inputは可能)
- marginは、左右のみ効きます。(img,inputは上下も可能)
インライン要素のサンプルです。
<style>
.box1 span {
height: 50px;
margin: 20px 20px 20px 20px;
}
.box1 {
background-color: #f5deb3;
}
</style>
<div class="box1">
<span>abc</span>
<span>abc</span>
<span>abc</span>
</div>
11~13行目は、インライン要素のspanタグが続いています。
画面に表示すると横に並びます。
3行目にheightがありますが、インライン要素には効きません。
4行目のmarginは、左右のみ効きます。
以下は実行結果のイメージです。
インライン要素+ブロックレベル要素
- display:inline-blockと指定するとinlineと同じように画面上は横に並びかつ
widthとheightで幅と高さを指定できます。 - marginも上下左右効きます。
- 便利なのでよく使われるテクニックです。
インライン要素+ブロックレベル要素のサンプルです。
<style>
.box1 div {
display: inline-block;
width: 100px;
height: 50px;
margin: 10px 10px 10px 10px;
background-color: #f5deb3;
}
</style>
<div class="box1">
<div>abc</div>
<div>abc</div>
<div>abc</div>
</div>
3行目はdisplayにinline-blockを指定しています。
11~13行目は、ブロックレベル要素のdivタグが続いていますが
inline-blockの指定があるので横に並びます。
widthとheightとmarginは反映されます。
以下は実行結果のイメージです。
関連の記事