Question

我的边缘有点奇怪。我不认为我之前已经注意到了这一点。我无法在页面上的所有实例中使标题和段落之间的边距相等。我尝试了各种各样的东西，比如使用跨度代替段落来测试，使用边距，在每个实例周围放置div，但我仍然得到这个。我甚至将样式减少到绝对最小值来测试它，我得到以下结果：http://s17.postimg.org/4t2tpgnu7/margins.png

正如您所看到的，段落文本与下一个标题之间的边距存在差异，最后一个是16px，另外两个是17px。实际标题和段落文本之间的边距也有差异，第一个是17px，其他是16px。该screencap来自以下代码。如您所见，非常简化的测试代码。

<html>
<head>
<style>
h1 {

    font-family:'serif';
    font-size:21px;
    color:#4d4d4d;
}
h2 {    
    font-family:'serif';
    font-size:12px;
    font-weight:bold;
    font-style:italic;
    color:#4d4d4d;
}
p {
    font-family:'serif';
    font-size:12px;
    color:#4d4d4d;
}
</style>
</head>
<body>
<div id="page-content">
        <h2>ABOUT US</h2>
        <p>Lorem</p>
        <h2>WHO WE ARE</h2>
        <p>Lorem</p>
        <h2>WHY US</h2>
        <p>Lorem</p>
        <h2>CONTACT US</h2>
        <p>Lorem</p>
</div>
</body>
</html>

但是我仍然在元素之间获得不等的垂直边距。我不确定之前是否已注意到这一点。我更喜欢文本和下一个标题之间的垂直边距是相同的。我错过了什么？

Answer 1

尝试在css中定义边距。

p {
font-family:'serif';
font-size:12px;
color:#4d4d4d;
margin-top: 17px; 
}

Answer 2

http://jsfiddle.net/h7ah5ybh/

通过明确声明确保特定保证金：

margin: 17px 0;

只需将其应用于<h2>和<p> s。

标题和段落之间的垂直边距不等

2 个答案: