margin和padding

一、外边距样式属性：margin

margin-top：设置元素的上外边距

margin-bottom：设置元素的下外边距

margin-left：设置元素的上左外边距

margin-right：设置元素的右外边距

margin：设置所有外边距的宽度

以上四种样式属性都具有的样式属性值有：

值	描述
auto	浏览器计算(上、下、左或右)外边距
length	定义固定的(上、下、左或右)外边距。默认值是0。允许使用负值。
%	定义基于父对象总高度或宽度的百分比(上、下、左或右)外边距。

 注意：

1、margin属性可以有 1 到 4 个值：

<p>白日依山尽，黄河入海流。</p>
<span style="display: inline-block;">郑州</span>
<b style="display: inline-block;">大学</b>
<span style="display: inline-block;">郑州</span> 
<div>欲穷千里目，更上一层楼。</div>		
<style>
    p,span,b,div{
        border: #0000FF 1px solid;
    }
			
    b{
        /*margin: 20px;*/ /*上下左右*/
        /*margin: 40px 20px;*/ /*上下  左右*/
        /*margin: 40px 20px 30px;*/ /*上  左右  下*/
        /*margin: 10px 30px 50px 70px;*/ /*顺时针：上  右  下  左*/
    }
</style>

2、margin:0 auto; —— 水平居中显示

3、取消浏览器为HTML文档中各标签设置的margin默认值：

*{
    margin: 0px;
}

4、块级元素的垂直相邻外边距会合并（即外边距合并），合并后的外边距间距等于两个外边距高度中的较大者；

     行内元素实际上不占上下外边距；行内元素的的左右外边距不会合；浮动元素的外边距也不会合并。

二、内边距样式属性：padding

padding-top：设置元素的上内边距

padding-bottom：设置元素的下内边距

padding-left：设置元素的上左内边距

padding-right：设置元素的右内边距

padding：设置所有内边距的宽度

以上四种样式属性都具有的样式属性值有：

值	描述
length	规定以具体单位计的固定的(上、下、左或右)内边距值，比如像素、厘米等。默认值是 0px。不允许使用负值。
%	定义基于父元素宽度的百分比(上、下、左或右)内边距。

另外padding还有auto属性值。

注意：

1、padding属性可以有 1 到 4 个值：

<p>郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院郑州大学第一附属医院
</p>		
<style>
    p{			 
        border: 1px #0000FF solid;
        /*padding: 20px;*/ /*上下左右*/
        /*padding: 40px 20px;*/ /*上下  左右*/
        /*padding: 40px 20px 30px;*/ /*上  左右  下*/
        padding: 10px 30px 50px 70px; /*顺时针：上  右  下  左*/
    }
</style>

2、取消浏览器为HTML文档中各标签设置的padding默认值：

*{
    padding: 0px;
}