16網頁前端CSS——盒子模型

一：盒子模型

1：內補白（內補丁）

padding：檢索或設置對象四邊的內部邊距，如padding：10px； padding：5px 10px；

padding-top：檢索或設置對象頂邊的內部邊距

padding-left:檢索或設置對象左邊的內部邊距

padding-right：檢索或設置對象右邊的內部邊距

padding-bottom：檢索或設置對象下邊的內部邊距

2：外補白（外補丁）

margin：檢索或設置對象四邊的外部邊距，如margin：10px；margin：5px auto；

margin-top：檢索或設置對象頂邊的外延邊距

margin-right：檢索或設置對象右邊的外延邊距

margin-bottom：檢索或設置對象下邊的外延邊距

margin-left：檢索或設置對象左邊的外延邊距

body{
    padding: 0px;/*改變默認的padding值*/
    margin: 0px;
}


#ad{
    width: 200px;
    height: 200px;
    background: green;
    border: 10px solid red;
    margin-top: 50px;
    padding: 20px;
    /* （div高度+邊框高度*2+內邊距*2）/2 = 文字居中的距離  */
    

}