这个问题已经在这里有了答案 :
如何删除内联/内联块元素之间的空间? (39个答案)
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>
问题在于,inline-block默认情况下,元素会渲染一些额外的空间。
inline-block
为什么?因为div设置为inline-block具有某些内联元素特征。
div
span元素之间的空格或换行符将导致浏览器呈现一个空间。
span
同样,如果您要在<p>元素中编写文本,则每次按下空格键或添加换行符时,浏览器都会呈现一个空格。
<p>
此规则适用于inline-blockdiv。源中的空格或换行符将导致渲染一个空间。这会产生意外的宽度,从而导致溢出或包装。
一种解决方案是删除源中元素之间的所有空格:
.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在父级上设置另一种方法,并在必要时恢复子级上的字体:
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 。请参阅本文以获取更多详细信息: