div で綺麗に枠に収めるための display:inline-block

div で綺麗に枠に収めるための display:inline-block

div でくくると文章の塊をはっきりさせることができて便利です。

が、幅が１００％。

これ、こまる。

こんな感じになるしぃ
　↓
横に長～～～いBOX


ので、その場合は、 inline-block を使います。


<div style="display:inline-block;background-color:#ffc;border:1px solid #ccc;padding:5px;">
横にぴったりBOX
可愛くコンパクトに収まるね。
</div>

結果
横にぴったりBOX
可愛くコンパクトに収まるね。



加えて、あまり使わないと思うけど inline というのもありんす。


<div style="display:inline;background-color:#ffc;border:1px solid #ccc;padding:5px;">
横にぴったり
でも text-heightも設定しないといけないし、みずらくない？
可愛くなくてコンパクトでもない。
</div>

結果
横にぴったり
でも text-heightも設定しないといけないし、みずらくない？
可愛くなくてコンパクトでもない。


スポンサーリンク