問題
display: inline-blockで、左右に出来る余白をなくすには？
解決策
親の要素に「letter-spacing: -.4em;」を設定し、「display: inline-block;」を設定する各要素に「letter-spacing: normal;」を設定する
display: inline-blockで左右に出来る、謎の余白。
display: inline-block;で要素を横に並べると、左右に謎の余白が出来てしまいます。そのせいで、ちゃんと計算して配置した要素が最後にはみ出て、下に折り返してしまうことに…。今回はその謎の余白をなくす方法をご紹介します。
まず、マークアップから行います。
例として、ulタグを構築します。
便宜上、ここではulタグに「dsib-list」というクラスを設定しています。
<ul class="dsib-list">
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>CSSの構築
ulタグのクラス「dsib-list」に対し、「letter-spacing: -.4em;」を設定します。
各liタグには、「display: inline-block;」と共に、「letter-spacing: normal;」を設定します。
.dsib-list{
letter-spacing: -.4em;
}
.dsib-list > li{
display: inline-block;
letter-spacing: normal;
padding: 4px 10px;
background-color: #fef5f2;
}DEMOはこちら
設定を行っていない場合
- リスト
- リスト
- リスト
設定を行っている場合
- リスト
- リスト
- リスト
コメント