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


スポンサーリンク

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

が、幅が100%。

これ、こまる。

こんな感じになるしぃ
 ↓
横に長~~~い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も設定しないといけないし、みずらくない?
可愛くなくてコンパクトでもない。


スポンサーリンク