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

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

---

进一步问题

对于"组合......"和"静雪"之间存在这么大差距的原因,是什么方法可以缩小差距,给出相应的负上/下边距<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;
}