html填充上边距没反应,HTML – 神秘的底部填充/边距问题

这实际上与填充或边距无关.如果我们查看计算样式示例,我们将看到元素本身的高度为164px：

发生这种情况是因为您的内部元素设置为显示为内联块.这意味着它们受字体大小的影响,并且最终字体大小导致父元素的高度大于内部元素的高度.

有两个修复：

>在.features元素上指定字体大小为0,然后在内部元素中重置它(通过给它们提供16或者默认大小的字体大小).

.features {

width: 980px;

margin: auto;

margin-top: 25px;

background-color: lightblue;

font-size: 0;

}

.list-items {

width: 280px;

height: 160px;

display: inline-block;

background-color: red;

font-size: 16px;

}

.screenshot-box {

width: 583px;

height: 160px;

float: right;

padding-bottom: 0;

display: inline-block;

background-color: red;

font-size: 16px;

}

>将.features元素的高度设置为160px,以匹配其子元素.有了这个,浏览器不必计算高度应该是什么.

.features {

width: 980px;

margin: auto;

margin-top: 25px;

background-color: lightblue;

height: 160px;

}

.list-items {

width: 280px;

height: 160px;

display: inline-block;

background-color: red;

}

.screenshot-box {

width: 583px;

height: 160px;

float: right;

padding-bottom: 0;

display: inline-block;

background-color: red;

}