display: inline-blockの特徴と使い方
インラインブロック要素の特徴
- 要素の幅は中身と同じ大きさになる
- 要素同士が横に並ぶ
- 幅(width)と高さ(height)が指定できる
- 余白(padding・margin)が指定できる
- 親要素に「text-align」が使える
- 親要素に「vertical-align」が使える
基本のhtmlとcss、表示
html
<div>
<p>ABCDE</p>
<p>FGHIJ</p>
<p>KLMNO</p>
</div>
css
p {
background-color: skyblue;
}

display: inline-blockを指定すると
css
p {
display: inline-block;
background-color: skyblue;
}

要素の幅が、中身と同じ大きさになり、要素同士が横並びになりました。
インラインブロックに、幅と高さを指定できる
p {
display: inline-block;
width: 100px;
height: 100px;
background-color: skyblue;
}

インラインブロックに、padding を指定できる
p {
display: inline-block;
width: 100px;
height: 100px;
padding: 10px;
background-color: skyblue;
}
padding:10px;を指定してみると
p {
display: inline-block;
width: 100px;
height: 100px;
padding: 20px;
background-color: skyblue;
}
padding:20px;を指定してみると
なぜか、ブロックが一つ下へ移動しました。これは、なぜか、わかりませんが、注意ですね。