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>
