padding–内边距
内边距,在边框和内容区之间的空白区域。
padding 属性接受长度值或百分比值(或者auto),不允许为负值
1.四个方向内边距一致时:
padding:10px; //元素距离外部父元素给边框的距离均为10px
2.四个方向还可按着上、右、下、左的顺序分别定义各内边距:
padding:10px 5px 10px 5px; //各内边距单位不统一也可以
3.分别定义上下、左右内边距:
padding:10px 5px; //前边的值定义上下内边距,后边的值定义左右内边距
除了同时定义四个方向的内边距外,还可单独定义某一方向的内边距:
- padding-top
- padding-right
- padding-bottom
- padding-left
代码展示:
padding-top:0px;
padding-right:5px;
padding-bottom:10em;
padding-left:5%;
注意:
内边距,不管是上下还是左右,如果要使用百分比定义的话,都是根据父元素的width属性计算的,这点儿很容易掉入误区:上下根据height,左右根据width
margin–外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
外边距的设置规则同内边距。
另外,我们还可以利用margin属性,做水平居中控制:
margin:0 auto;