Откуда взялись лишние отступы при верстке макета?

Question

[crossfire]

Здравствуйте,
Осваиваю CSS 3 и пытаюсь сверстать простейший макет сайта, сразу возникли сложности, а именно: появились лишние отступы в разных местах блоков.
Помогите разобраться в связи с чем так у меня произошло и как это можно исправить!

картинка с ненужными отступами
код на jsfiddle

Answer 1

[Евгений Петров]

Никакой CSS3 тут не причём. И вообще — забудьте вы про номер. Никакого отношения к делу это не имеет.
Смотрим https://jsfiddle.net/petroveg/exfj3L1c/1/

Читайте:

1. Про то, какие есть стили по умолчанию.
   
2. Про блочную модель и, в частности, про margin-collapse.
   
3. Про псевдоэлементы.
   
4. Про шрифты.
   

Замечу, что даже в версии 2.1 есть всё, что нужно было знать в вашем случае. Единственное, чего там точно нет — flex, но я бы пока на вашем месте обошёлся float:left.
Ну и классы, классы — не нужно писать правила с использованием в селекторах исключительно имён тэгов.

Update: Каждый второй пишет про сброс margin. Кто-то советует только для body и p, радикалы вообще для всего. Как это даст знания про margin-collapse? Эти советы — как красить ржавчину.

Comments

[crossfire]

Спасибо, за мастер-класс! А подскажите как в моем случае лучше приклеить футер к низу экрана?

[crossfire]

Пробовал этот способ, но почему-то не получилось(

[crossfire]

www.zakharov.ms/footer

[Евгений Петров]

Не знаю, как именно вы пытались, но расположение элементов неверное.
https://jsfiddle.net/petroveg/exfj3L1c/2/
Пы.Сы. Прямо узнаю фразы из своих ранних лекций:)

[crossfire]

Работает! Но нет выравнивания всех блоков по середине экрана. Так и запланировано?

[Евгений Петров]

Да, я повторным правилом margin перебил первое.
https://jsfiddle.net/petroveg/exfj3L1c/3/

[crossfire]

Вы очень крутой! Спасибо!

[crossfire]

Теперь буду смотреть разбирать код, постараюсь разобраться как все работает...

Answer 2

[Ilya Korablev]

*{
padding: 0;
margin: 0;
}

Едрить, когда же вы научитесь пользоваться Гуглом и поиском по Тостеру...