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

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

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

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

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

header{
  margin: 0px;
  padding: 0px;
  height: 20em;
  background-color: #C0C0C0;
}
<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 css margin html-heading
person odbhut.shei.chhele    schedule 20.01.2013    source источник
comment
какой браузер вы используете? В Opera 12.12 нет пробелов вокруг тега ‹header›.   -  person Jen-Ya    schedule 20.01.2013
comment
html, *, body { поле: 0px; отступ: 0px; }   -  person fred randall    schedule 16.04.2020

Ответы (8)


arrow_upward
60
arrow_downward

Пытаться:

h1 {
    margin-top: 0;
}

Вы видите последствия свертывания полей.

person robertc    schedule 20.01.2013
comment
Спасибо за, ссылку на статью о схлопывании полей, она прояснила многие вопросы, с которыми обычно сталкивается новичок. - person swati saoji; 15.01.2015
comment
@eddard.stark, если это сработает, вы должны принять ответ - person Ooker; 30.08.2015

arrow_upward
11
arrow_downward

Попробуйте маржу-сверху:

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

Редактировать:

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

<header style="position: relative; top: -20px;">
    ...
person benbai123    schedule 20.01.2013

arrow_upward
8
arrow_downward

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

* { margin: 0, padding: 0 }

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

person Панайот Толев    schedule 20.01.2013
comment
Будьте осторожны с использованием селектора *. Это очень плохо для производительности. Я думаю, вам следует подумать о работе со сбросом css, подобным тому, который предложил Эрик Мейер meyerweb.com/eric /инструменты/css/сброс - person Pevara; 20.01.2013

arrow_upward
5
arrow_downward

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

header {
  border-top: 1px solid gold !important;
  margin-top: -1px !important;
}
person Patrick van Efferen    schedule 22.09.2015

arrow_upward
4
arrow_downward

Просто для полноты измените 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>

person yckart    schedule 10.10.2015

arrow_upward
3
arrow_downward

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

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

person D_4_ni    schedule 20.01.2013

arrow_upward
1
arrow_downward

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

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

person Rudolf    schedule 20.01.2013
comment
вы имеете в виду поле: 0px; - person Xiler; 17.12.2014
comment
Линтеры даже выделяют вашу версию: github.com/CSSLint/csslint/ wiki/Запретить единицы измерения для нулевых значений - person Rudolf; 19.12.2014
comment
Ок, я этого не знал. Благодарю за разъяснение. - person Xiler; 19.12.2014

arrow_upward
1
arrow_downward

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

h1 {
  margin-top: -.3em;
  margin-bottom: 0em;
}
person user3139574    schedule 03.05.2017