web-dev-qa-db-ja.com

表示：インラインブロックの余白

display: inline-blockに設定され、divとheightが設定されているいくつかのwidthを使用しています。 HTMLでは、各divの後に改行がある場合、divの右と下に自動5pxマージンが追加されます。

例：

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

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

更新

私が見つけたものから、マージンを削除する方法はありません...すべてを同じ行に置くか、コメントを追加して改行をコメントアウトする場合を除きます。例：

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

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

htmlcssxhtml
133
mike

Divはインライン要素として扱われます。 2つのスパンの間のスペースまたは改行がギャップを作成するのと同じように、インラインブロックの間も作成します。それらに負のマージンを与えるか、周囲のコンテナにWord-spacing: -1;を設定することができます。

114
Daniel

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

これは驚くべきことではありません。スパン、ストロング、その他のインライン要素で毎日表示されます。フォントサイズをゼロに設定して、余分な余白を削除します。

.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/

116
Darwin

1年後、インラインLI問題でこの質問に出くわしましたが、ここで適用できる素晴らしい解決策を見つけました。

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

vertical-align:bottomすべてのLI要素で、すべてのブラウザーでの「余分なマージン」の問題を修正しました。

57
Ben

font-size: 0を親コンテナに

（出典： https://Twitter.com/garand/status/183253526313566208 ）

20
optimiertes

これらのスペースをきれいに削除するには、float: left;を使用します。

DEMO

HTML：

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

CSS：

div {
    background-color: red;
    float: left;
}

すべての新しいブラウザ でサポートされていません。 IEが多くの開発者がサイトをfirefox/chromeでうまく機能させることを決めなかったが、今日では IEは14.3％まで であると裁定したとき、なぜ戻ったのでしょうか。とにかく、IE-9ではサポートされていないと思っていても、多くの問題はありませんでした。たとえば、上記のデモは問題なく動作します。

8
Kuf

インラインブロック要素間にホワイトスペースがまったくない場合でも、垂直方向のスペースを確保できます。

私にとって、これはline-heightが原因でした。簡単な修正は：

div.container {
    line-height: 0;
}
div.container > * {
    line-height: normal;
}
6
chowey

記録のために、そのマージンとパディングのリセットは私にとってはうまくいきませんでしたが、上記のコメントの1つからのこの引用は重要であることが判明し、私にとって問題を解決しました： "divを同じ行に置くとマージンが消えます。」

3
Enchilada

この問題には、Wordの間隔やフォントサイズを含むいくつかの回避策がありますが、この記事では、右マージンが-4pxのマージンを削除することを提案しています。

http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

2
pixelator

問題のHTMLへのリンクを投稿できますか？

最終的に次のことができるはずです。

div {
    margin:0;
    padding: 0;
}

間隔を削除します。これは特定の1つのブラウザだけで実行されるのですか、それともすべてのブラウザで実行されるのですか？

0
Jeepstone

これに対する別の解決策は、HTMLミニファイヤを使用することです。これは、HTMLをその場で縮小できるGruntビルドプロセスで最適に機能します。

余分な改行と空白が削除され、マージンの問題がきれいに解決され、IDE（</li><li>なし）で好きなようにマークアップを記述できます。

0
Ben

同じ問題が発生しました。私にそれを引き起こしたのは、私が挿入した大量の空白（&nbsp;）でした。それらを削除した後、問題は解決しました。

0
JMS

この問題に何度も苦労した後、HTML 5で非常にエレガントなソリューションを見つけました。HTML5では、いくつかの（li、pなど）タグを閉じないでください。 XMLになるという野望は永遠に消え去りました。たとえば、リストを実行するための好ましい方法は次のとおりです。

<ul>
   <li>
       <a ...>...</a>
   <li>
       <a ...>...</a>
</ul>

ブラウザはLIを閉じなければならず、空白を導入せずにこれを実行し、この問題を解決する必要があります。まだXMLの考え方を持っているなら、それは間違っていると感じますが、一度それを乗り越えれば、多くの悪夢を救うことができます。 HTML 5仕様の文言に依存しているため、これはハックではありません。より良いのは、タグを閉じないことは広範にわたるため、互換性の問題はないことです（ただし、テストしていません）。ボーナスは、HTMLフォーマッタがこれをうまく処理できることです。

少しうまくいった例： http://cssdesk.com/Ls7fK

0
Peter Kriens