Задание 27. Специалисты "побейте по рукам" пожалуйста.

Курсы §15. Сетки
1

Здравствуйте! Только начинаю осваивать мир верстки страниц. Хотелось бы не учится “вредным” привычкам. Задание сделал на 100%. Но хотелось бы услышать мнение профи где у меня “кривость” рук.
Тут код - https://jsfiddle.net/andronav/tsk4h2p3/3/

Заранее спасибо за любую критику.

2

Много повторяется padding: 5px;
Для футера задано clear: both; хотя в коде есть распорка clearfix::after

3

Ок. Спасибо. По clear:both вижу, не доглядел.
Вот по паддингам. Я пробывал оборачивать текста в тег p и только ему дать 5px 5px. Но почему-то в этом случае у меня в колонках и в блоках promo1, 2 и в трех колонках left,main,right текст по вертикали смещался гораздо ниже от верха чем 5px. Как это победить не могу понять?

4

Убрал лишние padding: 5px 5px; Оставив один селектор тега p и сбросив в нем margin.
Текста обернул в p.
Результат тут: https://jsfiddle.net/tsk4h2p3/33/

Но голову сломал почему в блоках (классы paddin 1,2 и колонки) при размещении в них блочного элемента p, образуется внешний верхний отступ который надо убивать сбросом marginа? Туплю что-то, либо уже глаз замылился )).

5

У текстовых тегов есть стили по умолчанию (в том числе отступы). Их сбрасывают, это распространенная практика.

Неправильно добавлять распорку для header. Распорка добавляется непосредственному родителю плавающих элементов - по вашему коду это .center.

<div class="center clearfix">
        <div class="promo1">
          <p>Promo 1</p>
        </div>  
        <div class="promo2">
          <p>Promo 2</p>
        </div>  
</div>
1 лайк
6

Спасибо. Про clearfix учёл. Поправил. https://jsfiddle.net/tsk4h2p3/39/

У текстовых тегов есть стили по умолчанию (в том числе отступы). Их сбрасывают, это распространенная практика.

Не понятный момент в связи с этим, почему когда убираю margin: 0 у тега p. смещение происходит только в promo блоках и колонках. А в классах header-box,menu и в футере текст в абзаце не смещается относительно родительского блока, т.е. абзац остается на том же месте что с marign:0 так и без него?

7

Нет, во всех блоках смещается.
Там происходит два эффекта: схлопывание и выпадание внешних отступов.
Вспомните теорию:


1 лайк
8

Если я верно понял, то из float блоков не происходит выпадания внешних отступов поэтому такая картина и возникает? Как-то тяжеловато мне такое поведение блочных элементов даётся. :slight_smile: Тут выпадения, там схлопывания и т.д…и т.п… ))).

1 лайк