Внутренние отступы у блоков в CSS.

Question

Внутренние отступы у блоков в CSS.

Алексей Новиков Мастер (2121), открыт 3 недели назад

Есть вот такой исходник:

Задача: добавить внутренние отступы снизу у каждого блока.
Использую свойство padding-bottom, все получается, но почему то отступ после таблицы(второй блок) меньше чем у других двух блоков. Почему так получается, если при нулевом значении они на одинаковом расстоянии от границы блока. Ниже скрин с padding-bottom: 0; и padding-bottom: 10; Отчетливо видно, что отступ меньше во втором блоке, хотя значения для всех общие. Помогите, я новичок, не понимаю с чем это связано.

А вот код css

Answer 1

Андрей Высший разум (427808) 3 недели назад

Это может быть связано с тем, что у списков задан margin-bottom, который увеличивает размер отступа. Пока padding не было, margin'ы схлопывались: https://webref.ru/course/block-model/margin-collapse . Но когда появился padding, схлопывание выключилось и этот margin-bottom добавился к отступу снизу.

Алексей НовиковМастер (2121) 3 недели назад

Но тогда бы эта проблема относилась бы не к таблице, а просто ко второму блоку, независимо от того, какой контент он содержит, а я проверил это, поменяв местами контент 2 и 3 блока, при этом во втором уже не остается проблемы с отступом, а появляется она в 3 блоке, опять же там, где таблица(((

Андрей Высший разум (427808) Алексей Новиков, У списков margin-bottom есть (НЕ у блоков, а у тегов <ul>, <ol>, <li>). У таблицы margin-bottom нет. В результате у таблицы получаем отступ снизу 10px, а у списков 10px + значение margin-bottom вышеперечисленных тегов. Независимо от порядка следования блоков. Нажимаешь в браузере F12 и своими глазами смотришь, какие отступы у каких элементов заданы. И где именно они заданы.

Алексей НовиковМастер (2121) 3 недели назад

И если убрать margin, то ничего не меняется, проблема с внутренними отступами так и остается: