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

Я создал страницу и был потерян, когда заметил, что когда я увеличиваю или уменьшаю размер шрифта заголовка, окружающее пространство резко увеличивается. У меня нет заполнения для тега 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>
Please help!

Примечание. Я встроил шрифты в другой CSS, поэтому не обращайте на них внимания.

Спасибо


html fonts css
person arthrax    schedule 13.10.2015    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Это связано с тем, что к тегу <h1>, естественно, применяется поле, масштабируемое с размером шрифта. Вы хотите это в своем css:

h1 { margin:0 }
person David Li    schedule 13.10.2015
comment
Еще один вопрос: я добавил это, и теперь черное пространство все еще там, но текст поднялся. Поскольку у меня фиксированное положение вместе с контейнером с верхним полем в % (чтобы сделать его гибким), когда я изменяю размер окна, контейнер идет за заголовком. Есть ли способ исправить это? - person arthrax; 14.10.2015
comment
Я думаю, что лучший способ добиться этого — не указывать максимальную маржу в процентах. Просто установите margin-top на высоту вашего заголовка, так как высота заголовка постоянна. - person David Li; 14.10.2015
comment
Это тоже работает! Большое спасибо! Но это не было бы гибким, это моя проблема. - person arthrax; 14.10.2015
comment
Вы не хотите, чтобы он был гибким, если высота вашего заголовка не является гибкой! Если margin-top меньше высоты заголовка, вы получаете взаимодействие, которое происходит под заголовком. - person David Li; 14.10.2015
comment
но мой заголовок гибкий. Когда я изменяю размер окна, размер элемента заголовка изменяется, но контейнер отстает при изменении размера. - person arthrax; 14.10.2015
comment
Ах, я не уверен в деталях вашего изменения размера. Вы должны будете сделать некоторую математику на этом! - person David Li; 14.10.2015

arrow_upward
1
arrow_downward

Элемент h1 имеет поле, которое связано с размером шрифта через em. Если вы увеличиваете размер шрифта, em относится к размеру шрифта и, таким образом, увеличивается поле.

person Rob    schedule 13.10.2015

arrow_upward
1
arrow_downward

Или вы можете использовать max-height: <number of pixels> px вместо h1 { margin:0 }, и вы не повлияете на поля h1.

person Ovifdiu COmrasdd    schedule 13.10.2015