增加字體大小顯着增加標題的填充

我創建頁面時丟失了，當我注意到當我增加或減少標題的字體大小時，周圍空間以劇烈的大小增加。我沒有填充h1標籤，但它看起來像被添加。我嘗試刪除導航的填充，但它隻影響導航文本本身，而不是影響我的額外空間。下面是代碼：增加字體大小顯着增加標題的填充

body { 
 
    margin: 0; 
 
    font-family: Caviar, "Times New Roman", sans-serif; 
 
    float: clear; 
 
    text-align: center; 
 
} 
 
#main { 
 
    width: 100%; 
 
    padding: 0; 
 
} 
 
/* start the whole heading section */ 
 

 
h1 { 
 
    font-size: 5em; 
 
    color: #000000; 
 
    font-family: "Alex Brush", "Times New Roman", sans-serif; 
 
    padding-left: 2%; 
 
    float: left; 
 
} 
 
nav h2 { 
 
    font-weight: normal; 
 
} 
 
nav { 
 
    float: right; 
 
    font-family: Junction, "Times New Roman", sans-serif; 
 
    font-size: 1.1em; 
 
    /*padding-top: 5.2%; 
 
padding-right: 2%;*/ 
 
} 
 
nav a { 
 
    color: #000000; 
 
    text-decoration: none; 
 
} 
 
nav a:hover { 
 
    text-decoration: underline; 
 
} 
 
nav a:visited { 
 
    color: #000b26; 
 
} 
 
#header { 
 
    background-color: #FF6978; 
 
    display: block; 
 
    width: 100%; 
 
    text-align: left; 
 
    position: fixed; 
 
    overflow: hidden; 
 
    top: 0; 
 
    z-index: 999; 
 
    box-shadow: 5px 6px 5px #000000; 
 
} 
 
/*end heading section*/ 
 

 
#container { 
 
    margin: 0 auto 0 auto; 
 
    margin-left: 0 auto; 
 
    width: 96%; 
 
    margin-top: 13%; 
 
} 
 
.small_head { 
 
    font-family: Capsuula, "Times New Roman", sans-serif; 
 
    font-size: 2.2em; 
 
    border: 3px solid #FFFF61; 
 
    padding: .5% 5% .5% 5%; 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
}

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Check</title> 
 
    <meta charset="UTF-8"> 
 
    <link href="styles.css" rel="stylesheet" type="text/css"> 
 
    <link href="font.css" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <div id="main"> 
 
    <!--open main div--> 
 

 
    <div id="header"> 
 
     <h1>Checking Head</h1> 
 
     <nav> 
 
     <h2> 
 
<a href = "index.htm">Navigator</a> 
 
</h2> 
 
     </nav> 
 
    </div> 
 
    <!--close header--> 
 

 
    <div id="container"> 
 
     <div class="small_head">Small Head</div> 
 
    </div> 
 
    <!--close container--> 
 

 
    </div> 
 
    <!--close main--> 
 
</body> 
 

 
</html>

請幫幫忙！

注意：我在另一個css中嵌入了字體，所以請忽略這些字體。

謝謝

來源

2015-10-13 arthrax

這是因爲<h1>標籤自然有應用在它與字體大小縮放的餘量。你想在你的CSS這個：

h1 { margin:0 }

來源

2015-10-13 22:32:36

非常感謝！ – arthrax

不客氣:) –

還有一個問題：我補充說，現在黑色空間仍然存在，但文字已經增加。因爲我把它的位置與容器頂部的容器一起固定（爲了使它很靈活），所以當我調整窗口大小時，容器會在標題後面。有沒有辦法來解決這個問題？ – arthrax

h1元素有裕度與通過EM的字體大小有關。如果增加字體大小，em與字體大小有關，因此邊距增加。

來源

2015-10-13 22:35:22 Rob

或者您可以使用max-height: <number of pixels> px而不是h1 { margin:0 }，並且您不會影響h1邊距。

來源

2015-10-13 22:36:31

增加字體大小顯着增加標題的填充

回答

相關問題