magin-top 影响父元素

解决办法:

  1. 父级或子元素使用浮动或者绝对定位absolute

浮动或绝对定位不参与margin的折叠

  1. 父级overflow:hidden;

  2. 父级设置padding(破坏非空白的折叠条件)

  3. 父级设置border

导致这个问题的原因:

来看css2.1盒模型中规定的内容:
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔。
因为嵌套也属于毗邻,所以在样式表中优先级更高的

你可能感兴趣的:(magin-top 影响父元素)