前端 - margin的问题，那个老哥帮我解释下

Question

{代码...} div.c 不是应该被红色环绕吗？烦请那个老哥解释下。

大家讲道理 · Answer

Because in BFC, two adjacent (brothers or father-son), no borders and no padding, the margin-top of an element and the margin-top of its first regular document flow child element will produce margin-collapse (outer margin from folding).

You add a border to b,

border: 1px solid transparent;

Or add padding,

padding: 1px 0;

can be eliminated.

Alternatively, you can add overflow: hidden; to b.

You can refer to: In-depth understanding of BFC and Margin Collapse

PHP中文网 · Answer

Just add overflow: hidden; in .b.

Because overflow uses values other than visible (hidden, auto, scroll) will trigger BFC.
What is BFC?
Block Formatting Contexts (block-level formatting context)
Elements with BFC can be regarded as isolated independent containers. The elements inside the container will not affect the layout of the outside elements, and BFC has ordinary containers. There are some features that it does not have, such as the ability to contain floating elements. The second type of float clearing method mentioned above (such as the overflow method) triggers the BFC of the parent element of the floating element, so that it can contain floating elements, thereby preventing height collapse. problem.

天蓬老师 · Answer

overflow: hidden; You add this sentence to p.b.

迷茫 · Answer

Search for “child element margin affects parent element”

ringa_lee · Answer

This is called overlapping margins. The margins of the child elements will affect the parent elements, and the larger the margins of the two, the larger the margins of the entire container. At this time, you should choose to trigger BFC. The previous ones have made it very clear what BFC is. The situations that trigger BFC are:

Root element
float attribute is not none;
position is absolute or fixed;
display is inline-block, table-cell, table-caption, flex, inline-flex;
overflow is not visible;

Solution:

如果你给父级加上overflow：hidden,或者加上透明边框就可以解决了。

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial