html - CSS Padding 移动超过 1 个像素

Question

我不知道为什么padding-top: 0px要将元素padding-top: 1px;移动<h1>超过 1 个像素。进一步增加它，例如 2 个像素，将产生预期的结果。

CSS

.pageholder {
    padding: 15px;
    padding-top: 0px;
    //padding-top: 1px;
    background-color: white;
}

HTML

<div id="content">
    <div class="pageholder">
            <h1>Add item link</h1>
    </div>
</div>

...aaand 最后，一个有问题的 jsfiddle：http: //jsfiddle.net/xbAqC/

（删除 // 以查看差异）

score 8 · Accepted Answer

内部 div 上的填充可防止边距塌陷。当填充不存在时，默认的上边距<h1>与' 的边距折叠。<body>填充可以防止这种情况。

您可以通过删除<body>' 的边距来查看差异：http: //jsfiddle.net/xbAqC/2/

score 0 · Accepted Answer

H1 标签有自己的边距和内边距。将 h1 的填充和边距设置为 0，它应该可以解决您的问题。

score 0 · Accepted Answer

您设置了一个 padding-top 和一个 padding。两者不能共存。有2种方法可以解决。一种是删除填充并在每一侧添加不同的填充，第二个（更好）是添加一个填充，它存在于每一侧，但具有不同的值：

padding: 16px 15px 15px 15px;

在上面的示例中，第一个数字是顶部，第二个是右侧，第三个是底部，第四个是左侧。数字从顶部开始，顺时针方向。

score -1 · Accepted Answer

试试这个：链接

.pageholder h1 {
    padding:15px ;
    padding-top: 1px;
    //padding-top: 1px;
    background-color: white;
}

4 回答 4