Как я могу удалить пробел (поле) над заголовком HTML?

Я создаю сайт.

Я написал часть HTML, и теперь я пишу таблицу стилей. Но в моем заголовке всегда есть место. Я не могу удалить это.

Мой код HTML и CSS приведен ниже.

<header>
 <h1>OQ Online Judge</h1>
 <form action="<?php echo base_url();?>/index.php/base/si" method="post">
  <label for="email1">E-mail : </label><input type="text" name="email" id="email1">
  <label for="password1">Password : </label><input type="password" name="password" id="password1">
  <input type="submit" name="submit" value="Login">
 </form>
</header>

Это мой HTML-код.

body{
margin: 0px;
padding: 0px;
}
header{
margin: 0px;
padding: 0px;
height: 20em;
background-color: #C0C0C0;
}

Это мой код CSS.

Ответы

Ответ 1

Try:

h1 {
    margin-top: 0;
}

Вы видите эффекты разворота маржи.

Ответ 2

Попробуйте margin-top:

<header style="margin-top: -20px;">
    ...

Edit:

Теперь я нашел относительное положение, вероятно, лучшим выбором:

<header style="position: relative; top: -20px;">
    ...

Ответ 3

Это хорошая практика, когда вы начинаете создавать веб-сайт до reset всех полей и прокладок. Поэтому я рекомендую начать просто так просто:

* { margin: 0, padding: 0 }

Это сделает поля и paddings всех элементов равными 0, а затем вы можете их стилизовать по своему желанию, потому что каждый браузер имеет разное значение по умолчанию и заполнение элементов.

Ответ 4

Я решил проблему с пространством путем добавления границы и удаления, установив отрицательный запас. Не знаю, какова основная проблема.

header {
  border-top: 1px solid gold !important;
  margin-top: -1px !important;
}

Ответ 5

Чтобы предотвратить непредвиденные поля и другое поведение браузера в будущем, я бы рекомендовал включить reset.css в ваши таблицы стилей.

Помните, что вам нужно будет установить размер и вес шрифта h [1..6], чтобы заголовки снова выглядели как заголовки и многое другое.

Ответ 6

Просто для полноты, изменение overflow до auto/hidden тоже должно сделать трюк.

body {
  margin: 0px;
  padding: 0px;
}

header {
  margin: 0px;
  padding: 0px;
  height: 20em;
  background-color: #C0C0C0;
  overflow: auto;
}

<header>
  <h1>OQ Online Judge</h1>

  <form action="<?php echo base_url();?>/index.php/base/si" method="post">
    <label for="email1">E-mail :</label>
    <input type="text" name="email" id="email1">
    <label for="password1">Password :</label>
    <input type="password" name="password" id="password1">
    <input type="submit" name="submit" value="Login">
  </form>
</header>

Ответ 7

Вероятно, тег h1 вызывает проблему. Применение margin: 0; должно устранить проблему.

Но вы должны использовать CSS reset для каждого нового проекта для устранения согласованности браузера и проблем, подобных вашим. Вероятно, самым известным является Эрик Мейер: http://meyerweb.com/eric/tools/css/reset/

Ответ 8

Этот css разрешил хром и firefox отображать все остальные элементы на моей странице и удалять поле выше моего тега h1. Кроме того, при изменении размера страницы они могут работать лучше, чем px.

h1 {
  margin-top: -.3em;
  margin-bottom: 0em;
}