☰

表示: インラインブロックの余分な余白 [重複] 質問する

tag-icon • tag-icon html css xhtml
表示: インラインブロックの余分な余白 [重複] 質問する

div私はに設定され、と がdisplay: inline-block設定されているいくつかの を操作しています。HTML では、それぞれの後に改行がある場合、div の右と下に 5 ピクセルの余白が自動的に追加されます。heightwidthdiv

例：

<div>Some Text</div>
<div>Some Text</div>

自動マージンをリセットできる、見落としているプロパティはありますか?

アップデート

私が調べたところ、余白を削除する方法はありません...すべてを同じ行に配置するか、コメントを追加して改行をコメント アウトする場合を除きます。例:

<div>Some Text</div><!--
--><div>Some Text</div>

最善の解決策ではありませんが、複数行がある場合は読みやすくなります。

ベストアンサー1

空白はインライン要素に影響する。

これは驚くべきことではありません。span、strong、その他のインライン要素では毎日見かけます。余分な余白を削除するには、フォント サイズを 0 に設定します。

.container {
  font-size: 0px;
  letter-spacing: 0px;
  word-spacing: 0px;
}

.container > div {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  font-size: 15px;
  letter-spacing: 1em;
  word-spacing: 2em;
}

例は次のようになります。

<div class="container">
  <div>First</div>
  <div>Second</div>
</div>

これの jsfiddle バージョンです。http://jsfiddle.net/QtDGJ/1/

おすすめ記事