标签：body 边框 html meta doc yellow char add margin
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 100px; height: 100px; background-color:red ; margin-bottom:100px ; } /* 垂直外边距的重叠 在网页中相邻垂直方向的相邻外边距会发生外边距的重叠 外边距的重叠指兄弟元素之间的相邻外边距会取最大值而不是取和 如果父子元素的垂直外边距相邻，则子元素外边距设置给父元素 */ .box2{ width: 100px; height: 100px; background-color: green; margin-top:100px ; } .box3{ width: 200px; height: 100px; background-color: yellow; /*box3设置上边框*/ /* border-top:1px red solid ; 使用padding注意内容区可见框不变，在height处减去 */ padding-top: 100px; } .box4{ width: 100px; height: 100px; background-color: green; /* 为子元素设置上边距，使子元素向下移动 */ /* margin-top: 100px; */ } </style> </head> <body> <div class="box3"> <div class="box4"></div> </div> <div class="box1"></div> <div class="box2"></div> </body> </html>
垂直外边距的重叠
网页中相邻垂直方向的外边距会发生重叠
外边距重叠指兄弟元素 之间相邻外边距会取最大值而不是和
如果父子元素的垂直外边距相邻，则子元素外边距设置给父元素
使用padding注意要使内容区可见框不变，要在height减去
标签：body 边框 html meta doc yellow char add margin
原文地址：https://www.cnblogs.com/kfj010810/p/14967500.html
