Удаление поля тела в CSS

Я новичок в веб-разработке и столкнулся с проблемой при удалении поля тела.

There's space between the very top and "logo" Там находится пространство между самой верхней частью браузера и текстом "логотип". И мой код здесь, на jsbin.

Является ли body { margin: 0;} неправильным, если я хотел бы удалить пробел?

Ответы

Ответ 1

Я бы сказал, что используя:

* {
  margin: 0;
  padding: 0;
}

- это плохой способ решения этого вопроса.

Причиной появления маркера h1 родителя является то, что родительский элемент не имеет отступов.

Если вы добавите дополнение к родительскому элементу h1, маржа будет внутри родителя.

Сброс всех прокруток и полей до 0 может вызвать множество побочных эффектов. Затем лучше удалить margin-top для этого конкретного заголовка.

Ответ 2

Некоторые элементы HTML имеют предопределенные поля (а именно: body, от h1 до h6, p, fieldset, form, ul, ol, dl, dir, menu, blockquote и dd).

В вашем случае это h1 вызывающий вашу проблему. По умолчанию он имеет { margin:.67em }. Если вы установите его на 0, это уберет пробел.

Для решения подобных проблем, как правило, я рекомендую использовать инструменты разработки вашего браузера. Для большинства браузеров: щелкните правой кнопкой мыши на элементе, о котором вы хотите узнать больше, и выберите "Проверить элемент". На вкладке "Стили" в самом низу у вас есть блочная модель CSS. Это отличный инструмент для визуализации границ, отступов и полей, а также того, какие элементы являются корнем вашей головной боли при укладке.

Ответ 3

Я бы порекомендовал вам сбросить все элементы HTML, прежде чем писать свой CSS с помощью:

* {
    margin: 0;
    padding: 0;
}

После этого вы можете написать свой собственный CSS, без каких-либо проблем.

Ответ 4

У вас все еще есть маржа на тэге h1

Итак, вам нужно удалить это так:

h1 {
 margin-top:0;
}

Ответ 5

Проблема с полем заголовка h1. Вам нужно попробовать следующее:

h1 {
 margin-top:0;
}

Ответ 6

Это поможет вам избавиться от полей тела и верхнего поля по умолчанию тега <h1>

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

h1 {
        margin-top: 0px;
    }

Ответ 7

Вы можете использовать тело или * для создания поля и заполнения 0px;

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

Ответ 8

Правильный ответ на этот вопрос: "css reset".

* {
    margin: 0;
    padding: 0;
}

Он удаляет все поля по умолчанию и отступы для каждого объекта на странице, без ограничений, независимо от браузера.

Ответ 9

Я обнаружил, что эта проблема продолжалась даже при установке нуля BODY MARGIN.

Однако оказывается, что есть легкое исправление. Все, что вам нужно сделать, это дать вашему телу HEADER 1px границу, а также установить значение BODY MARGIN равным нулю, как показано ниже.

body { margin:0px; }

header { border:1px black solid; }

Вам также может потребоваться изменить MARGIN на ноль для любых элементов H1, H2 и т.д., которые у вас есть в div вашего HEADER. Это избавится от лишнего места, которое может отображаться вокруг текста.

Не знаю, почему это работает, но я использую браузер Chrome. Очевидно, вы также можете изменить цвет рамки в соответствии с цветом заголовка.

Ответ 10

Просто удалите браузер по умолчанию Margin и Padding Применить верхнюю часть вашего Css.

<style>

* {
  margin: 0;
  padding: 0;
}

</style>

Примечание:

  • Перед тем, как писать свой css, попробуйте Reset все html elements.

ИЛИ [Use This In Your Case]

<style>

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

h1 {
        margin-top: 0px;
    }

</style>

DEMO:

<style>

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

h1 {
        margin-top: 0px;
    }

</style>
<html>
 <head>
 </head>
 <body>
  <h1>logo</h1>
 </body>
</html>