9

いくつかのDIVをインラインブロックとして表示しています。そして、ブラウザからそれらの間に自動的に間隔が適用されているようです。マージン/パディングが0に設定されています。負のマージンを使用せずにこれを修正する方法はありますか？

4

5 に答える 5

13

サム、あなたが見ているそのスペースは実際には空白です。そのため、パディングとマージンを削除しても何も起こりません。説明させてください。あなたがこれを持っているとき：

HTML

<div>
    a
    a
    a
    a
</div>

これはそれがどのようにレンダリングされるかです：

a a a a

...右？

だから、あなたがこれを持っているなら：

<div>
    <div style="display:inline-block"></div>
    <div style="display:inline-block"></div>
    <div style="display:inline-block"></div>
</div>

...同じことがわかります：

block [space] block [space] block

さて...この問題には多くの異なる解決策があります。最も一般的なのは、htmlの空白をコメントアウトすることだと思います。

   <div>
        <div style="display:inline-block"></div><!--
        --><div style="display:inline-block"></div><!--
        --><div style="display:inline-block"></div>
   </div>

私はそれが好きではありません-私はhtmlをできるだけきれいに保つことを好みます。私の好みの方法は、親のフォントサイズを0に設定してから、インラインブロック自体に目的のフォントサイズを戻すことです。そのようです：

div {
    font-size: 0; /* removes the whitespace */
}

div div {
    display: inline-block;
    font-size: 14px;
}
于 2012-07-12T21:47:47.003 に答える
2

元のマージンを相殺するために負のマージンを使用する必要はありません。

代わりに、次のようにオーバーライドできます。

* { margin:0; }

また：

.div { margin:0; }

要素固有の場合。

編集：

問題は意図しない空白の結果である可能性があります。例えば：

<div style="display:inline-block">
    ...
</div>
<div style="display:inline-block">
    ...
</div>

2つの仕切りの間に空白が存在し、その結果、ブラウザは空白を印刷します。これを修正するには、次のように変更する必要があります。

<div style="display:inline-block">
    ...
</div><div style="display:inline-block">
    ...
</div>

楽しんで頑張ってください！

于 2012-07-12T20:04:47.613 に答える
2

との両方display: inline-blockを使用float: leftして、そのスペースを削除できます。

ここにplunkrがあります：https ：//plnkr.co/edit/Sn3NG77asiXO8UrrpxWD？p = Preview

于 2017-01-14T19:17:44.460 に答える
0

インラインブロックは元々IE6のハックです

これは、その使用目的です。

  • フロート要素のIE6ダブルマージンバグを修正するには
  • 複数のブロックのような要素をフローティングせずに同じ水平線上に配置するには（例外的なケースをフローティングできない場合）
  • インライン要素をインラインのままにして、幅や高さを設定できるようにする
  • インライン要素にパディングまたはマージンを持たせるには

したがって、複数のdivを並べて配置したい場合は、floatを使用してください。これにより、インラインブロックが引き起こす可能性のあるcssの問題の多く、特にクロスブラウザの問題が解決されます。

インラインブロックの詳細はこちらarcticle9.2.4

よろしくSP

同意しない場合はコメントしてください

于 2012-09-11T14:49:47.930 に答える
0

親コンテナの単語間隔を変更するメソッドが機能することを私が見つけた別の方法https://jsfiddle.net/1ex5gpo3/2/

.parent {
    word-spacing: -1em;
}

.child {
    word-spacing: normal;
    display: inline-block;
}
于 2016-02-09T10:12:04.230 に答える