Поведение элементов блока в html

Question

У меня есть два элемента раздела с контейнером ids1, container2 соответственно. У каждого элемента есть каждый элемент. Раздел # container1 имеет границу.

• Если установить запас для ЛУ элементов, для секции # container1 (который имеет границу) запас находится внутри контейнера, для секции # container2, который не имеет ни одного ребенка до уль элемента, запас находится вне контейнера.
• Это происходит для любого первого дочернего элемента родителя, когда родительский элемент не имеет своих размеров.

jsbin link of the page. screenshot of the page. Мой вопрос касается поведения элементов блока. Я понимаю, что это очень просто.

1. Если мы не устанавливаем высоту или ширину родительского элемента блока, то запас мы устанавливаем для первого ребенка отображается как если он установлен для родителя.

2. Но если у нас есть граница, то в этом случае маржа устанавливается внутри родительского контейнера и контейнер расширяется. Почему это так?

Может ли кто-нибудь объяснить это поведение? Если у вас есть какой-либо ресурс, объясняющий такое основное поведение, пожалуйста, укажите на это. Существует много таких небольших поведений, которые не упоминаются в каких-либо учебниках. Если у кого-то есть список таких мелочей или что-то, чему вы научились при разработке веб-страниц, укажите ссылку или ссылку в комментариях или ответах. Это было бы очень полезно для новичков.

Answer 1

Я считаю, что вы испытываете «рушившиеся края». Одним из правил сбрасывания полей является то, что верхнее и нижнее поле первого ребенка не будут отталкивать ребенка от его контейнера, но поле будет применяться к внешней стороне контейнера. Это просто правило в CSS. Некоторые из вещей, которые вы можете сделать, чтобы контейнер, чтобы сделать это правило не применяется в

• Добавить границу
• Добавить обивка
• Добавить overflow: auto

Подробнее здесь https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing