4

インラインブロック要素間のゴーストスペースを削除するにはどうすればよいですか?

これは jsfiddle http://jsfiddle.net/hFDcV/で、div 間の水平方向のスペースがはっきりとわかります。

そして StackOverflow 必須のコード例:

<div id='row'>
  <div class='box'>Something</div>
  <div class='box'>Something</div>
  <div class='box'>Something</div>
  <div class='box'>Something</div>
</div>

#row {
  background-color: red;
}

.box {
  width: 150px;
  height: 150px;
  background-color: yellow;
  display: inline-block;
  margin: 0;
  padding:0;
}

</p>

4

2 に答える 2

4

1つの解決策: http://jsfiddle.net/hFDcV/4/

親コンテナーの font-size を設定0し、子要素でそれをリセットします。

#row {
    font-size:0;
}

.box {
    font-size:12pt;
}

別の解決策: http://jsfiddle.net/hFDcV/10/

box要素を左にフロートできます。にセットoverflow:hidden;することで高さへのrow倒れ込みを防ぎます。0

#row {
    overflow:hidden;
}

.box {
    float:left;
}

@RickCalder によって共有されたこの問題に関する素晴らしい記事には、他の解決策があります。

于 2012-11-27T17:42:39.870 に答える
1

これを実現する簡単な方法の 1 つは、インライン ブロック要素の間にコメントを挿入することです。

このような ：

<div id='row'>
  <div class='box'>Something</div><!--
  --><div class='box'>Something</div><!--
  --><div class='box'>Something</div><!--
  --><div class='box'>Something</div>
</div>

これが誰かを助けることを願っています!

于 2014-03-12T15:05:51.313 に答える