Нормализация CSS с локальной таблицей стилей выглядит неправильно

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

<!DOCTYPE html>
<html>
    <head>
        <title>Matt's Template</title>

        <!-- Stylesheets -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css" type="text/css" />
        <link rel="stylesheet" href="CSS/general.css" type="text/css" />
    </head>
    <body>
            <section class="container">
            <h1>Matt's Template</h1>

            </section>

        <!-- Javascript Libraries -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></script>
        <!-- My Javscript -->
    </body>
</html>

Если я просматриваю этот код в своем браузере Chrome, кажется, что тело смещено примерно на 15 пикселей вниз от тега html. Тем не менее, мой CSS явно говорит, что теги html и body не имеют отступов или полей. Так почему же это место?? Это случилось раньше, и я не совсем уверен, как я решил это. Должен быть какой-то очевидный ответ. Вот мой CSS тоже.

html, body {
    height:100%;
    width:100%;
    padding:0;
    margin:0;

}
.container {
    height:100%;
    width:960px;
    position:relative;
    margin:0 auto;
    padding:0;
    background:#E0E0E0;
}
Источник

3 ответа

Решение

Проблема в том, что ваш <h1> по-прежнему имеет поле по умолчанию, вы только сняли значение по умолчанию <body> поле 8px, но не для других элементов, которые имеют стили UA по умолчанию. Вы должны изучить возможность сброса, чтобы вы могли "начать с нуля" для каждого элемента.

http://jsfiddle.net/qfSZ5/3/

Источник

Попробуйте добавить

h1 {margin:0}

или же

h1 {display:inline-block}

если вы хотите сохранить свои поля внутри родителя.

jsfiddle

Источник

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

* {
    margin: 0;
    padding: 0;
}

И это буквально означает:

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

Источник
Другие вопросы по тегам