問題 × 解決策

display: inline-blockで、左右に出来る余白をなくすには?

問題

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はこちら

設定を行っていない場合

  • リスト
  • リスト
  • リスト

設定を行っている場合

  • リスト
  • リスト
  • リスト

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

3 × 4 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧