css內外邊距
阿新 • • 發佈：2021-07-01
外邊距和內邊距
- margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
- padding: 用於控制內容與邊框之間的距離；
- Border(邊框) 圍繞在內邊距和內容外的邊框。
- Content(內容) 盒子的內容，顯示文字和影象。
元素的寬度和高度:
重要:當您指定一個CSS元素的寬度和高度屬性時，你只是設定內容區域的寬度和高度。要知道，完全大小的元素，你還必須新增填充，邊框和邊距。
''' margin:10px 5px 15px 20px;-----------上 右 下 左 margin:10px 5px 15px;----------------上 右左 下 margin:10px 5px;---------------------上下 右左 margin:10px; ---------------------上右下左'''
下面的例子中的元素的總寬度為300px：
''' width:250px; padding:10px; border:5px solid gray; margin:10px; '''
思考1:
邊框在預設情況下會定位於瀏覽器視窗的左上角，但是並沒有緊貼著瀏覽器的視窗的邊框，這是因為body本身也是一個盒子（外層還有html），在預設情況下， body距離html會有若干畫素的margin，具體數值因各個瀏覽器不盡相同，所以body中的盒子不會緊貼瀏覽器視窗的邊框了，為了驗證這一點，加上：
body{ border: 1px solid; background-color: cadetblue; }
>>>>解決方法：
body{ margin: 0; }
思考2：
margin collapse（邊界塌陷或者說邊界重疊）
外邊距的重疊只產生在普通流文件的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。設想，當我們上下排列一系列規則的塊級元素（如段 落P）時，那麼塊元素之間因為外邊距重疊的存在，段落之間就不會產生雙倍的距離。
1兄弟div：上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin裡最大值作為顯示值
2父子div
如果父級div中沒有 border，padding，inline content，子級div的margin會一直向上找，直到找到某個標籤包括border，padding，inline content中的其中一個，然後按此div 進行margin；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta class="keywords" content="css的內外邊距"> <meta class="description" content="study"> <meta http-equiv="Refresh" content="1800;https://www.baidu.com"> <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"> <title>標題</title> <link rel="stylesheet" href="day111.css"> <link rel="icon" href="https://www.baidu.com/favicon.ico"> <!--<script src="js.js"></script>--> </head> <body> <div class="div1">hello div1</div> <div class="div2">hello div2</div> <div class="div3">hello div3</div> <div class="div4"> <!--content--> <div class="div5">111111</div> <div class="div6">222222</div> </div> </body> </html>
.div1{ width: 200px; height: 200px; background-color: lightpink; border: 20px solid red; /*邊框粗細20px*/ padding: 20px; /*padding是上下左右內邊距都為20px，內邊距是從文字開始算起*/ margin-bottom: 20px; /*下外邊距20px*/ /*margin: 20px;*/ /*簡寫上/右/下/左外邊距20px*/ /*margin: 10px 20px 30px 40px;*/ /*分別代表上/右/下/左外邊距*/ /*margin: 10px 20px 30px;*/ /*分別代表上/右左/下外邊距*/ /*margin: 10px 20px;*/ /*分別代表上下/左右外邊距*/ } .div2{ width: 200px; height: 200px; background-color: deepskyblue; border: 20px solid green; padding: 10px; margin-left: 20px; /*左外邊距20px*/ margin-top: 30px; /*上外邊距30px，div2和div1是兄弟div，那麼上下外邊距會有邊界塌陷，取上下兩者最大值作為顯示，即div1和div2上下間距為30px，並不是50px*/ } body{ border: 2px solid black; margin: 0px; /*body標籤與瀏覽器有預設外邊距，可自行取消*/ } .div3{ width: 200px; height: 200px; background-color: blueviolet; } .div4{ width: 500px; height: 500px; background-color: mediumspringgreen; /*border: 1px solid red;/*/ /*不能為0px*/ /*padding: 1px;*/ /*不能為0px*/ } .div5{ width: 100px; height: 100px; background-color: orangered; margin-top: 30px; /*div4標籤沒有border/padding/inline content(文字內容)，那麼div5的margin會往上找，要麼碰到div3(和div4是兄弟div)進行margin，要麼碰到div4的父級及往上的父級(body是div4父級)有border/padding/inline content再進行margin*/ } .div6{ width: 100px; height: 100px; background-color: aquamarine; }