標簽：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
