Как удалить пространство над заголовком?

Я создаю веб-сайт. Я написал 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>
 <label for="password1">Password : </label>
 
 </form>
</header>

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

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

Это мой код css.

8 ответов

Try:

h1 {
 margin-top: 0;
}

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


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

<header style="margin-top: -20px;"><code>
 ...
</code>
<p>Edit:</p>
<p>Теперь я нашел относительное положение, вероятно, лучшим выбором:</p>
<pre class="prettyprint linenums"><header style="position: relative; top: -20px;"><code>
 ...
</code></header>


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

* { margin: 0, padding: 0 }

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


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

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


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


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

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


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

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


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

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

licensed under cc by-sa 3.0 with attribution.