1
<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <style>
        html, body, #wrapper, #all {height: 100%; margin: 0;}
        #wrapper {width: 800px; margin: 0 auto;}
        #main {min-height: 100%; margin-bottom: -100px; background: yellow;}
        footer {height: 100px; background: blue;}
        #all {padding-bottom: 100px;}
    </style>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="wrapper">
    <div id="main">
        <div id="all">
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
            <p>text</p>
        </div>
    </div>
    <footer>Footer</footer>
</div>

</body>
</html>

Вот код. Объясните, отступы какого элемента создают пространство вверху страницы? Знаю, что если * все обнулить, то будет все ОК. Но хотелось бы понять причину.

2
  • Благодарю за ответы 21 авг 2014 в 21:04
  • @Дмитрий Сафонов, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом).
    – Deleted
    22 авг 2014 в 5:22

2 ответа 2

1

Это стандартные настройки Вашего браузера (user agent stylesheet так называемые). Для их обнуления лучше использовать reset.css или normalize.css. Ответ на Ваш вопрос - тег p. То, что Вы задали margin: 0 для #all, роли не играет, так как margin не наследуется.

1

В вашем случае на отступы влияет элемент <p>. Добавьте его в перечисляемый список и получите нужный эффект:

html, body, #wrapper, #all, p, footer {margin: 0;}

По умолчанию элемент <p> имеет свойства margin-top и margin-bottom, равные 16px. Но, чтоб не мучиться, используют универсальный селектор звёздочки (*), чтоб выбрать все элементы на странице.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.