HTML&CSS基础-垂直外边距的重叠/折叠
HTML&CSS基础-垂直外边距的重叠/折叠
作者:尹正杰
版权声明:原创作品,谢绝转载!否则将追究法律责任。
一.HTML源代码
<!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: royalblue; /** * 为下边的元素设置一个上外边距 */ margin-top: 100px; } .box3{ width: 200px; height: 100px; background-color:deeppink; padding-top: 100px; } .box4{ width: 100px; height: 100px; background-color:coral; /** * 为子元素设置一个上边距,使得子元素唯一下移 */ /*margin-top: 100px;*/ } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"> <div class="box4"></div> </div> </body> </html>
二.浏览器打开以上代码渲染结果
当你的才华还撑不起你的野心的时候,你就应该静下心来学习。当你的能力还驾驭不了你的目标的时候,你就应该沉下心来历练。问问自己,想要怎样的人生。
欢迎交流学习技术交流,个人微信: "JasonYin2020"(添加时请备注来源及意图备注)
作者: 尹正杰, 博客: https://www.cnblogs.com/yinzhengjie/p/7758389.html