Блог

Главная - Вопросы по программированию - При попытке создать заголовок веб-сайта, в левом / верхнем углу есть небольшое пространство, которое не исчезнет

При попытке создать заголовок веб-сайта, в левом / верхнем углу есть небольшое пространство, которое не исчезнет

#css #html

#css #HTML

Вопрос:

 @import 'https://fonts.googleapis.com/css?family=PT Sans';
 * {
  font-family: 'PT Sans', sans-serif;
}
#headerpanel {
  display: block;
  background-color: red;
  width: 100%;
  margin: 0px;
  padding 0px;
  border: 0px;
}  
 <title>Test Site</title>
<body>
  <div id="headerpanel">
    TEST
  </div>
</body>

То, что я пытаюсь сделать, это создать «заголовок», который начинался бы с самого левого края сайта до самого правого, с самого верха примерно на 20 пикселей вниз.

Пространство?

Но когда я тестирую сайт, я вижу, что в верхнем левом углу есть это небольшое пространство… Как мне избавиться от этого?

Комментарии:

1. установите margin: 0 значение body

Ответ №1:

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

Ответ №2:

Вам просто нужно сбросить стиль полей браузера по умолчанию для body .

 body {
    margin: auto;
}

Взгляните на свою боксовую модель через вкладку «Вычислено» в IDE вашего браузера / инструменте разработчика.

введите описание изображения здесь

Ответ №3:

Добавьте следующее в свой CSS

 body{
  margin:0;
}

Ответ №4:

удалите поле слева

 @import 'https://fonts.googleapis.com/css?family=PT Sans';

* {
    font-family: 'PT Sans', sans-serif;
}

#headerpanel {
    display: block;
    background-color: red;
    width: 100%;
    margin: 0px;
    padding 0px;
    border: 0px;
}
body{margin: 8px 0px; }  
 <title>Test Site</title>
<body> 
<div id="headerpanel">
TEST
</div>
</body>

Ответ №5:

Либо я неправильно понял ваш вопрос, либо все другие ответы сделали это. Я всегда думал, что margin: 0; это устранило проблему, и это происходит в некоторых браузерах, но Safari и Chrome, чтобы назвать несколько, добавляют эту маленькую границу. Код, который вы должны использовать top: 0; left: 0; для выравнивания по краю страницы.

 @import 'https://fonts.googleapis.com/css?family=PT Sans';
 * {
  font-family: 'PT Sans', sans-serif;
}
#headerpanel {
  position: fixed;
  display: block;
  background-color: red;
  top: 0;
  left: 0;
  right: 0;/* since we are moving it left a little, we use right: 0; instead of width: 100%; */
  margin: 0px;
  padding: 0px;
  border: 0px;
}  
 <title>Test Site</title>
<body>
  <div id="headerpanel">
    TEST
  </div>
</body>