我有一个基本 HTML
和 CSS
的简单场景,其中边界框测量不会在宽度方向上相加。
预期的结果是通过将列宽设置为 324 px
而获得的,尽管 320 px
似乎是合适的。在下面JSFiddle有一个属性值需要更改以查看预期结果与实际结果。所需的宽度。
预期结果(错误的属性值)
div.container div.column {
width: 324px;
}
错误的结果(期望的属性值)
div.container div.column {
width: 320px;
}
为什么我认为 320 px
应该是我的两个按钮的包含宽度:
320 像素
(列)= 155 像素
(按钮)+ 10px
(边距) + 155px
(按钮)
我确定问题出在我的理解上,谁能解释为什么会这样?
最佳答案
<button>
s 默认是行内 block 元素。这意味着空间(字面意思是空间)会影响它的间距。
您可以将按钮设置为显示 block 并向左浮动以获得类似的结果:
div.container button {
width: 155px;
height: 155px;
margin-right: 10px;
display:block; float:left;
}
您还需要清除行中的 float :
div.container div.row:after {
clear:both;
display:table;
content:'';
}
关于html - 边距、边框、填充和大小未按预期相加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22081652/