margin:标签与标签的距离
padding：内边距，用于控制内容与边框之间的距离
Border（边框）：围绕在内边距和内容外的边框
content（内容）：盒子的内容，显示文本和图像
设置的宽高是文本控制的范围
<body>与<html>之间默认有个外边距（浏览器加的）
标签就是元素
margin:10px 20px 30px 40px 表示上，右，下，左的外边距
10px 20px 30px 表示上，左右，下的外边距
10px 20px 表示上下，左右的外边距
10px 表示上下左右的外边距
兄弟div（边界塌陷）：两元素外边距取最大值作为显示值
父子div：父级div没有border,padding,inline content,子级div的margin会一直向上找，直到找到有border,padding,inline content属性，然后dic进行margin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width: 200px; height: 200px; background-color: antiquewhite; border: 40px solid rebeccapurple; padding: 40px; /*margin: 20px;*/ /*margin-bottom: 40px;*/ /*margin: 10px 20px 30px 40px;*/ margin-top: 30px; margin-bottom:40px; } .div2{ width: 200px; height: 200px; background-color: lightblue; border: 20px solid red; border: 30px blue ; border-style: ; ; /*padding: 5px;*/ /*margin-top: 40px;*/ } .outer{ height: 1000px; background-color: aquamarine; /*border: 1px red solid;*/ /*padding: 1px;*/ overflow: hidden; } .outer2{ width: 1000px; height: 1500px; background-color: firebrick; } body{ border: 60px solid darkcyan; margin: 0px; } </style> </head> <body> <div class="outer2"> <div class="outer"> <div class="div1">hello div1</div> <div class="div2"></div> <span>uuu</span><span>ooo</span> </div> </div> </body> </html>
