STAFF BLOGAPRICOT STAFFスタッフ別/スタッフブログ

2015.12.07

inline-blockについて考えてみた

0

inline-block こんにちは!おひさしぶりです(^◇^)
アプリコットデザインのあんざいです。

久々のブログはちゃんとwebの事について書こうと思います!
そしてタイトルにもあるように「inline-block」について考えてみました。

何かとよく使う「inline-block」。
高さがバラバラな要素を横並びにさせる時に、「float:left」だとカラム落ちしてしまうので、
よく「display:inline-block」で横並びにさせます。
ですが、謎の隙間ができてしますのですよね・・・・

こんな具合に
inline-block_02
◆html

  • 1
  • 2
  • 3

◆CSS
li{
    display: inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    margin:0;
    border:#FFF 1px solid;
}

marginも指定していないのに・・・
何とかしてこの隙間を埋めることはできないのか!

対策1:ulにletter-spacingにマイナスの値を与える

liの親要素のulにletter-spacing: -0.4emを与えます。
li同士の隙間は無くなりますが、文字の感覚まで影響を受けてしまいますので、
liにletter-spacing: normalを指定して、
文字の間隔を戻してあげます。

◆CSS
ul{
   letter-spacing: -0.4em; /* 追加部分 */ 
}
li{
    display: inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    margin:0;
    border:#FFF 1px solid;
    letter-spacing: normal; /* 追加 */
}

inline-block_03
こちらは問題なく使用できていますが、ブラウザによってはletter-spacingに違いがあり、
場合によってはブラウザ毎に変更してあげる必要もあるため、対策が必要です・・・


対策2:ulにfont-size: 0を与える

liの親要素のulにfont-size:0を指定し、
liにfont-size:〇〇pxを指定してあげます。

◆CSS
ul{
   font-size: 0; /* 追加部分 */ 
}
li{
    display: inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    margin:0;
    border:#FFF 1px solid;
    font-size: 13px; /* 追加部分 */
}

こうすることで隙間が無くなります。

inline-block_03
また、上記以外にも、html上でliの行を改行しないで、一列で書くという方法もあるのですが、
こちらは要素内の文章が長くなったり、したら、ソースが見づらくなるのでオススメはできません。
◆html
  • 1
  • 2
  • 3

今回これを書くにあたって色々調べたりしてみて、改めてcssは奥深いなぁと思いました。
結構、色々な謎の隙間に悩んだりするのですが、ひとつひとつ要素の特性を知り、解決していきたいなと思いました(^◇^)

ではまた!



記事が気に入ったら「いいね」してね。(SNSとは連動してません)
0

営業マンゼロだから低コスト・高パフォーマンス!東京・長野(長野市、松本市)・金沢(石川県金沢市)でホームページ制作・WEB制作・ネットショップ制作を中心に、ブランディングに繋がるロゴ制作・チラシ・名刺・パンフレット・DM・ショップカード等の各種印刷物、看板・のぼりなどの販促物を制作しているデザイン事務所アプリコットデザイン。

[長野オフィス-本社-]
〒381-2246
長野県長野市丹波島1-805

[東京ブランチ]
〒100-0004
東京都千代田区大手町 2-6-1 朝日生命大手町ビル2F

[松本ブランチ]
〒390-0851
長野県松本市大字島内4619-3 QuintetDoor 1階南室

[金沢ベース]
〒920-0831
石川県金沢市東山1丁目10-1 103