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

问题描述：

我注意到，当我有一个<h2>标记正下方的<h1>标记时，两者之间有很大差距。没有填充或边距设置，我已经使用normalize.css规范了css。为何存在这种差距？两个相邻的<h...>元素之间的大距离

小提琴这里：fiddle

这里是一个屏幕截图：

Screen Shot

HTML（normalize.css是活跃在这个网站）

<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..>上的负顶部/底部保证金？

请注意，normalize.css [*不是* CSS重置]（http://nicolasglagher.com/about-normalize-css/）。它保留了常用的有用样式，如标题元素上的边距。 –

@Jamie，给你一个负数，你只需使用margin-top：例如在h2上使用-10px。 – lifetimes

答

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

非常感谢...这就像一个魅力。 – cafebabe1991

答

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

你忘了采取默认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对于一些默认样式元素的图像：

enter image description here

查看更多有关默认样式的元素在这里W3.org。

两个相邻的元素之间的大距离

相关推荐