html – 内嵌块框不适合其容器

概述参见英文答案 > How do I remove the space between inline-block elements?                                    37个 不知道我做错了什么,我认为通过添加边框,它将整齐地适合那4个盒子. http://jsfiddle.net/jzhang172/x3ftdx6n/ .ok{width:300px; 参见英文答案 > How do I remove the space between inline-block elements?                                    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 ><div >1</div><div >2</div><div >3</div><div >4</div>    </div>

解决方法 问题是默认情况下,内联块元素会使用一些额外的空间进行渲染.

为什么？因为设置为内联块的div具有一些内联元素特征.

span元素之间的空格或换行符将导致浏览器呈现的空间.

同样,如果您在< p>中写文字元素,每次点击空格键或添加换行符时,浏览器都会呈现一个空格.

同样的规则适用于内联块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 ><div >1</div><div >2</div><div >3</div><div >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 >  <div >1</div>  <div >2</div>  <div >3</div>  <div >4</div></div>

其他选项包括负边距,省略结束标记,使用注释标记,浮点数和d性框.有关详细信息,请参阅此文章：

> Fighting the Space Between Inline Block Elements

总结

以上是内存溢出为你收集整理的html – 内嵌块框不适合其容器全部内容，希望文章能够帮你解决html – 内嵌块框不适合其容器所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。