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

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

Экран Снимок проблемы

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

<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>

Ответы

Ответ 1

Try...

body {
   margin: 0;
   padding: 0;
}

jsFiddle.

Из-за того, что браузеры используют разные таблицы стилей по умолчанию, некоторые люди рекомендуют таблицу стилей reset, такую как Eric Meyer reset Reloaded.

Ответ 2

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

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

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

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

Ответ 3

Try

html, body{
  margin:0 !important;
  padding:0 !important;
}

Ответ 4

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

a paddding!= 0 на теле
margin!= 0 на #header

попробуйте

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

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

Ответ 5

h1 {
margin-top:0;
padding-top: 0;}

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

Ответ 6

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

#header_content p {
    margin-top: 0;
}

jsFiddle

Ответ 7

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

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

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

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