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 = 文字居中的距离  */
    

}