内联块框在它们的容器[重复]不嵌合内联块框在它们的容器[重复]不嵌合(inline-block bo

这个问题已经在这里有一个答案：

• 如何删除inline-block的元素之间的空间？ 37个回答

不知道我做错了，我认为，通过增加边界框，这将完全适合那些4盒。

http://jsfiddle.net/jzhang172/x3ftdx6n/

 .ok{ width:300px; background:red; height:100px; box-sizing:border-box; } .box{ display:inline-block; box-sizing:border-box; width:25%; border:2px solid blue; height:100%; } 

 <div class="ok"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> </div> 

Answer 1:

问题是inline-block元素，默认情况下，呈现了一些额外的空间。

为什么？ 由于div集合到inline-block具有一定的行内的元件特性。

之间的空间或换行符span元件将导致由浏览器中呈现的空间。

同样，如果你正在写在文本<p>元素，每次按下空格键或添加了换行符的空间将被浏览器渲染。

此规则同样适用于inline-block div的。 在源的空间或换行符将导致渲染的空间。 这产生意想不到的宽度，这可导致上溢或包装。

一种解决方案是去除源极元件之间的所有空格：

 .ok { width: 300px; background: red; height: 100px; box-sizing: border-box; } .box { display: inline-block; box-sizing: border-box; width: 25%; border: 2px solid blue; height: 100%; } 

 <div class="ok"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div></div> 

另一种方法设置font-size: 0上的父和，如果必要的话，将恢复对孩子的字体：

 .ok { width: 300px; background: red; height: 100px; box-sizing: border-box; font-size: 0; } .box { display: inline-block; box-sizing: border-box; width: 25%; border: 2px solid blue; height: 100%; font-size: 16px; } 

 <div class="ok"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> </div> 

其他选项包括切缘阴性 ， 省略结束标签 ， 使用注释标记 ， 浮标和Flexbox的 。 请参阅本文的详细信息：

• 战斗直插块元件之间的空间

Answer 2:

我会坚持让你添加一个属性。 其中一个消除之间的空格box格。 只需添加float:left; 您.box类/格。

演示：更新

 .ok{ margin:0px auto; /* ADDED */ width:300px; background:red; height:100px; box-sizing:border-box; padding:0px auto; } .box{ display:inline-block; box-sizing:border-box; width:25%; border:2px solid blue; height:100%; float:left; } 

 <div class="ok"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> </div> 

UPDATE：要居中它添加只是多一个属性margin:0px auto; 您.ok类/格。 CHECK OUT更新的演示和摘要。

注意：这将让您在文本box格靠左对齐，所以如果你想要中心仅添加text-align:center; 您.box在CSS类。

文章来源: inline-block boxes not fitting in their container [duplicate]