参考资料
https://www.w3school.com.cn/css/css_margin_collapsing.asp
https://segmentfault.com/a/1190000019250914
内盒的margin-top设为30px;margin-left设为30px;
效果是:内盒的margin-left有效,但内盒的margin-top使外盒向下移动了30px;
这时,内盒设置了margin-top属性,内盒和外盒的顶部并不会有间距,而是外盒被顶下来,好像给外盒设置了margin-top属性一样。
原因:
1.margin-left:
外盒没有向右移动是受文本流的影响
2.margin-top:
外盒受影响向下移动,是因为外盒没有内边距、边框与内盒分隔,内外盒子的外边距重叠。内盒设置margin-top属性,使内盒溢出显示到了外盒的外面去了。
解决:
1.外盒设置边框border
2.外盒使用内边距padding
3.设置浮动
4.外盒设置 overflow:hidden 溢出隐藏(推荐)
限制内盒的显示范围,将margin-top值的起始位置算到了外盒里面
解决盒子嵌套中,内盒margin-top失效
最新推荐文章于 2022-09-10 00:00:54 发布