初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

CSS display:inline-blockの隙間をなくす

本日はdisplay:inline-bloc                              kを使って横並ぶにした際の隙間をなくす方法をいくつか記述します。
まず複数ボックスを作り色分けしておきましょう。

HTMLは下記のように記述します。

<ul>
<li class="box1">box1</li>
<li class="box2">box2</li>
<li class="box3">box3</li>
<li class="box4">box4</li>
</ul>

CSSは下記のように記述します。

ul, li{
margin:0;
padding:0;
}
.box1 {
background:red;
}
.box2 {
background:aqua;
}
.box3 {
background:yellow;
}
.box4 {
background:green;
}
ul{
width:600px;
margin:50px auto;
}
li{
display: inline-block;/*ブロックレベル要素に横並びにする*/
width:100px;
height:100px;
}

ここまで記述すると画像のようになります。
f:id:bellsmarket:20150305024801p:plain

要素の間にそれぞれ微妙な隙間が空いてしまっているのが分かるかと思います。これはli要素の間に存在する改行が半角スペースとして表示されてしまっているからです。

では回避方法を書いていきます。

    1. 改行を消し一行で記述する。

f:id:bellsmarket:20150305023629p:plain

  1. CSSで解決する。
ul{
width:600px;
margin:50px auto;
letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */
}
li{
letter-spacing: normal; /* 文字間を通常に戻す */
display: inline-block;/*ブロックレベル要素に横並びにする*/
width:100px;
height:100px;
line-height: 100px;
text-align: center;
}

《実行結果》
f:id:bellsmarket:20150305024747p:plain

どちらの方法でも隙間をなくすことが出来ます。 1の方法だとHTMLが一行で長くなるのが気になる方は、2の方法で選択すると良いでしょう。

topへ戻る