兩個相鄰的<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..>上的負頂部/底部保證金？

來源

2013-03-30 Jamie Fearon

請注意，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; 
}

來源

2013-03-30 19:31:19 Scott

非常感謝...這就像一個魅力。 – 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。

來源

2013-03-30 19:31:57 lifetimes

兩個相鄰的<h...>元素之間的大距離

回答

相關問題