html - 两个相邻的距离大元素

Question

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

小提琴在这里：小提琴

这是一个屏幕截图：

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);
}

---

进一步的问题

对于“...的投资组合”和“Jing Xue”之间如此大的差距的原因是什么，缩小差距以给出相应的负顶部/底部边距的正确方法是<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上查看有关元素默认样式的更多信息。