CSS Margin: 0 не устанавливается в 0 - PullRequest
Новая
       7

CSS Margin: 0 не устанавливается в 0

22 голосов
/ 22 марта 2011

Я новичок в веб-дизайне.Я создал свой макет веб-страницы, используя CSS и HTML, как показано ниже.Проблема в том, что, хотя я установил поле на 0, верхнее поле не устанавливается на 0 и оставляет некоторое пространство.Как я могу очистить этот пробел?

Снимок экрана с проблемой

There's a space in top

Таблица стилей 

<style type="text/css">
body{   
    margin:0 auto; 
    background:#F0F0F0;}

#header{
    background-color:#009ACD; 
    height:120px;}

#header_content { 
    width:70%; 
    background-color:#00B2EE;
    height:120px; 
    margin:0 auto;
    text-align:center;}

#content{   
        width:68%; 
        background-color:#EBEBEB;
        margin:0 auto; 
        padding:20px;}
</style>

HTML 

<body>
    <div id="header">
     <div id="header_content">
           <p>header_content</p>
       </div>
    </div>
<div id="content">
Main Content
</div>
</body>

Вот весь файл 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Book Shop</title>
<style type="text/css">
html, body, #header {
    margin: 0 !important;
    padding: 0 !important;
}
body{   
    margin:0;    padding: 0;
    background:#F0F0F0;}

#header{
    background-color:#009ACD; 
    height:120px;}

#header_content { 
    width:70%; 
    background-color:#00B2EE;
    height:120px; 
    margin:0 auto;
    text-align:center;}

#content{   
        width:68%; 
        background-color:#EBEBEB;
        margin:0 auto; 
        padding:20px;}

body {
   margin: 0;
   padding: 0;
}
</style>
</head>

<body>
  <div id="header">
     <div id="header_content">
           <p>header_content</p>
       </div>
    </div>
<div id="content">
Main Content
</div>

</body>
</html>

Ответы [ 8 ]

33 голосов
/ 22 марта 2011

Попробуйте ... 

body {
   margin: 0;
   padding: 0;
}

jsFiddle .

Из-за того, что браузеры используют разные таблицы стилей по умолчанию, некоторые люди рекомендуют reset таблицу стилейнапример, Сброс Эрика Мейера: Перезагрузка .

21 голосов
/ 28 мая 2011

Вам нужно установить для фактической страницы поля: 0 и отступ: 0 для фактического HTML, а не только для тела.

используйте это в своей таблице стилей CSS. 

*, html {
    margin:0;
    padding:0;  
}

это установит всю страницу на 0, для нового чистого начала без полей или отступов.

4 голосов
/ 22 марта 2011

вы должны иметь (или оба):

  1. дополнение! = 0 на теле
  2. поле! = 0 для #header

попробуй 

html, #header {
    margin: 0 !important;
    padding: 0 !important;
}

margin - это "пробел" вне коробки, padding - это "пробел" внутри коробки (между границей и содержимым). !important предотвращает переопределение свойства по последним правилам.

3 голосов
/ 20 мая 2014 
h1 {
margin-top:0;
padding-top: 0;}

Это просто недоразумение с тегом h1. Вы должны установить для тега h1 margin-top и padding-top значение 0 (ноль).

3 голосов
/ 22 марта 2011

Попробуйте 

html, body{
  margin:0 !important;
  padding:0 !important;
}
0 голосов
/ 11 июня 2018

добавить этот код в начало основного CSS. 

*,html,body{
  margin:0 !important;
  padding:0 !important;
  box-sizing: border-box !important;;
}
0 голосов
/ 01 января 2017

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

Я адаптировал метод, используемый для правильного применения свойства размера ящика к полям и отступам. оригинальная статья для определения размеров ящика находится по адресу CSS-хитрости : 

html {
margin: 0;
padding: 0;
}
*, *:before, *:after {
margin: inherit;
padding: inherit;
}

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

0 голосов
/ 14 июля 2015

Кажется, никто на самом деле не прочитал ваш вопрос и не посмотрел ваш исходный код. Вот ответ, которого вы все ждали: 

#header_content p {
    margin-top: 0;
}

jsFiddle

...