You are here
Home > WEB制作 > CSS > 【CSS】inline-blockの隙間をなくす方法

【CSS】inline-blockの隙間をなくす方法

ブラウザの幅に合わせて自動で均等に配置し、グリッドレイアウトを簡単に作成可能な「inline-block」。
主に「ul>li」でリストを横並びの表示にさせ、グローバルメニューを作成するのに便利。

でも気をつけないと、「余計な隙間」が生まれデザインが崩れてしまいます。
今回はその発生原因と回避方法をご紹介します。

SPONSERD LINK

inline-blockの使い方

「inline-block」を使用するには、CSSを以下の様に記述します。

display:inline-block;

inline-blockの隙間

まず、使用したHTML例は以下。

 

今回使用する確認用CSSは以下。

表示させたものがこちら。リスト間に「隙間」があることがわかります。

inline-block 画像1

スマホ用表示がこちら。

まるで階段ように表示が崩れています。

inline-block 画像4

inline-blockで隙間が発生する理由

「inline-block」で隙間が発生する理由は「リストタグ内の半角スペース、または改行」が半角スペースとして表示されてしまうからです。

無駄なものを削除してあげると、均一に表示されます。

inline-blockの隙間を消す

空白や改行を含まないようにHTMLを修正します。

変更した後の表示がこちら。

inline-block 画像2

無事余計な隙間が無くなり、きれいな形に表示されています。

ちなみに、スマホ用の表示が以下。

inline-block 画像3

きれいに均一に表示されていることが分かります。

CSSでinline-blockの隙間を消す

最後に制作現場で「コードを見やすく書かなければいけない」等の決まりがある場合は、下記のCSSで対応可能です。

いかがでしたでしょうか。

お役に立てれば幸いです。

0
Pocket

SPONSERD LINK

コメントを残す

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Top