为调整内容在盒子中的显示位置,可为元素栓之内边距(内填充),即为元素内容
与边框
之间的距离
设置方式与div的边框类似
padding-top:上边距;
padding-right:右边距;
padding-bottom:下边距;
padding-left:设置四周边距:
内边距是复合属性示例代码:
padding:5px 3px 4px/*设置上内边距为5px,左右内内边距为3px*,下内边距为4px*/
auto:自动(默认值)
相对于父元素或浏览加宽度的百分比
pdding:5%;/*段落内边距为父元素边框宽度的5%*/
注意:如果设置内外边界的属性为百分比,宽度岁父元素的wigdt变化,和高度height无关
通畅网页由多个盒子排列而成
,可以通过外边距属性
设置盒子与盒子之间的距离,外边距就是元素边框与相邻元素
之间的距离
注意:和内边距不同,外边距margin
允许取值为负数
margin-top;上外边距;
margin-right;右外边距;
margin-bottom:下外边距;
margin-left:左外边距;
margin:上下左右外边距;
当我们对块级元素设置width宽度,同时将左右的外边距设置为
auto
时,可以使其居中
margin:0 auto; /*实现水平居中*/
margin:5px auto /*实现水平居中,且上下拉开5px外边距*/
为了方便控制网页中的元素,制作网页是通常先清除元素的默认内外边距
*{
padding:0; /清除内边距/
margin:0;/清除外边距/
}
每个盒子都有固定的大小wigth(宽度)height(高度)
Box {
width:300px; /设置盒子的宽度/
height:300px;/设置盒子的高度/
}
一个盒子的整体宽度``是由盒子的width和+左外边距+右外边距
总和共同决定的。
一个盒子的整体高度``是由盒子的height和+上外边距+下外边距+上下边框宽度
总和共同决定的。