inline-block の隙間を無くす方法

inline-block の隙間を無くす方法

webのあれこれ
2019/04/03 0
vanillaice (Akira)
vanillaice (Akira)
初心者向け Instruction CSS トラブル対処

display: inline-block が指定されている要素間および要素下にできる隙間の対処についてです。
要素自体が inline-block である、という認識が無い場合もありますので、隙間に悩んでいる場合はまずその要素のdisplay値が何になっているか、という点を調べてください。

inline-blockの特徴

  • 横に並ぶ
  • 上下左右にmarginを指定できる
  • 上下左右にpaddingを指定できる
  • vertical-alignを指定できる

これが主な特徴になるんですが、さらにinlne-blcok値であるがゆえの固有のふるまいがあります。それが 要素間と要素下に出来る隙間 です。

<div style="max-width: 600px; background: red;">
  <div style="display: inline-block; width: calc(100% / 3); height: 30px; background: white;"></div>
  <div style="display: inline-block; width: calc(100% / 3); height: 30px; background: blue;"></div>
  <div style="display: inline-block; width: calc(100% / 3); height: 30px; background: yellow;"></div>
</div>

赤が親要素です。その中に3つのボックスがあり、それぞれのdisplay値が inline-block です。横幅は四則計算で calc(100% / 3) これは100%割ることの3という意味です。通常計算では33.3333… となり割り切れませんが、ブラウザがうまいことやってくれます。要は、このhtml(インラインCSS含む)内容で通常ならばきっち収まるはずの計算式です。

が、実際には各子要素間に隙間がありますので、親の width: 600px では領域が足りなくなり、最後の黄色のボックスは下へ折り返しています。この原因は ソースコードを要素間改行している ためです。

inline-block間の横方向の隙間をなくす

<div style="max-width: 600px; background: red;">
  <div style="display: inline-block; width: calc(100% / 3); height: 30px; background: white;"></div><div style="display: inline-block; width: calc(100% / 3); height: 30px; background: blue;"></div><div style="display: inline-block; width: calc(100% / 3); height: 30px; background: yellow;"></div>
</div>

左右の隙間が無くなりました。htmlソースコードで子要素同士に入れた改行を無くしただけです。
inline-blockは要素間改行すると横に隙間が出来ます
最も簡単な対処法は改行を無くすことです。inline-block同士の話ですから、display値が block である親要素の区切りで改行を入れるのは問題ありません。

ソースを横にズラズラ書くと視認性が悪いと考える方は以下の方法も有効です。

<div style="max-width: 600px; background: red; letter-spacing: -.4em;">
  <div style="display: inline-block; width: calc(100% / 3); height: 30px; background: white;"></div>
  <div style="display: inline-block; width: calc(100% / 3); height: 30px; background: blue;"></div>
  <div style="display: inline-block; width: calc(100% / 3); height: 30px; background: yellow;"></div>
</div>

letter-spacing というプロパティは文字間の調整です。ネガティブ(マイナス)値を指定することで文字間隔が詰められます。これを利用して -.4em を指定するとinline-blockの隙間を詰めることができます。letter-spacingの影響を受けるのは inlineinline-block ならでは。inlineの代表が「テキスト」「文章」です。

ただしこの親要素にletter-spacingが指定されたinline-blockの中に「テキスト」が有る場合は以下のようになります。

あいうえお
かきくけこ
さしすせそ

文字が重なっていますよね。letter-spacingで詰めたのですから当然です。これを避けるには

あいうえお
かきくけこ
さしすせそ
<div style="max-width: 600px; background: red; letter-spacing: -.4em;">
  <div style="letter-spacing: normal; display: inline-block; width: calc(100% / 3); height: 30px; background: white;"></div>
  <div style="letter-spacing: normal; display: inline-block; width: calc(100% / 3); height: 30px; background: blue;"></div>
  <div style="letter-spacing: normal; display: inline-block; width: calc(100% / 3); height: 30px; background: yellow;"></div>
</div>

子要素側(inline-block指定要素)に直接 letter-spacing: normal を指定して通常の状態に引き戻します。

テキストが入っただけで下に隙間が無くなっている点に注目。
これはletter-spacingの効果ではありません。

子要素3つは全て height: 30px の指定がありますので、本来なら親要素も子要素に広げられて同じ30pxの縦幅になるはずですが、inline-block固有の隙間によって30pxよりも大きくなっています。でもテキストが入った方は何故かぴったりフィット。

inline-block指定要素下の隙間をなくす

<div style="max-width: 600px; background: red;">
  <div style="vertical-align: top; display: inline-block; width: calc(100% / 3); height: 30px; background: white;"></div><div style="vertical-align: top; display: inline-block; width: calc(100% / 3); height: 30px; background: blue;"></div><div style="vertical-align: top; display: inline-block; width: calc(100% / 3); height: 30px; background: yellow;"></div>
</div>

inline-blockは「テキスト」の特徴を踏襲していますので、同じく「文字の」ベースライン の概念も適用されます。

欧文には下に飛び出す文字がありますのでこういう細かい分類になっています。inline-blockのペースラインの初期値は baseline です(スクショ参照)
この合わせにしているので下に飛び出てしまう、つまり下に余分な空間ができます。ですからこの垂直のいち合わせ vertical-aligntop または bottom に変更します。これで隙間が無くなります。

まとめ

inline-blockは本来横に並べられないものを横並びにできますし、margin, paddingも指定できて便利なんですが、こういったはまりどころを持っています。
テキストが入っている時は良いんですが、例えば5つあるナビゲーションリンクのうち、4つはテキスト、1つは webアイコン なんて時にはまりやすい。 「なんだかわからないけど親要素の縦幅が大きくなる (;ωq`)」という場面に出くわしたら、その子要素のdisplayプロパティをチェックしてみることをおすすめします。

 0

There are no comments yet.

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

webのあれこれ