两个相邻的<h ...>元素之间的距离很大</h ...>

Question

我注意到当<h2>标记正下方有<h1>标记时，两者之间存在较大差距。没有设置填充或边距，我使用normalize.css对css进行了规范化。为什么存在这种差距？

在这里小提琴：fiddle

这是一个截图：

html （normalize.css在此HTML上有效）

<div class="header">
    <div class="wrapper">
        <h1>Portfolio of...</h1>    
        <h2>Jing Xue</h2>
    </div>
</div>

CSS

.wrapper {
    width: 940px;
    margin: 0 auto 0 auto;
}

/* header ------------------------------------------------------------------ */

.header {
    text-align: center;
    padding: 40px 0 0 0;
    margin-bottom: 40px;
}

.header h1 {
    font-family: 'Delius Swash Caps', cursive;
    font-size: 250%;
    color: rgb(200,50,50);
    /* margin-bottom: -50px; */
}

.header h2 {
    font-family: 'Playfair Display SC', serif;
    font-size: 450%;
    color: rgb(59,67,68);
}

---

进一步的问题

对于“......的组合”与“静雪”之间存在巨大差距的原因，是缩小差距以在相应的<h..>上给出负上/下边距的正确方法？

Answer 1

h1到h4个代码都有默认的保证金。您需要在CSS中删除该边距。

.header h1 {
    font-family: 'Delius Swash Caps', cursive;
    font-size: 250%;
    color: rgb(200,50,50);
    margin:0;
}

.header h2 {
    font-family: 'Playfair Display SC', serif;
    font-size: 450%;
    color: rgb(59,67,68);
    margin:0;
}

Answer 2

这是这些元素的正常行为..

您忘记取消margin-top元素的默认h2。只需将margin-top:0px;添加到h2课程即可。

这是一个有效的jsFiddle 。

您的课程现在应如下所示：

.header h2 {
    font-family: 'Playfair Display SC', serif;
    font-size: 450%;
    color: rgb(59,67,68);
    margin-top:0px;
}

以下是 W3 中有关某些默认元素样式的图片：

在W3.org上查看有关元素默认样式的详情。