Увеличение размера шрифта резко увеличивает заполнение заголовка

Я создаю страницу и был потерян, когда заметил, что когда я увеличиваю или уменьшаю размер шрифта заголовка, окружающее пространство увеличивается в резком размере. У меня нет прокладки для тега h1, но похоже, что он добавляется. Я попытался удалить прокладку для навигатора, но это затрагивает только текст nav, а не дополнительное пространство, которое меня беспокоит. Вот код:Увеличение размера шрифта резко увеличивает заполнение заголовка

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

Увеличение размера шрифта резко увеличивает заполнение заголовка

ответ

Смежные вопросы