CSS内边距与外边距-蒲公英云

CSS内边距与外边距

外边距 margin

外边距是指用标签设置的内容外部的边距。它可以很好地将元素和旁边的其他元素隔开。

1.居中 auto

    使用auto属性值可以将整个被包含在内的内容水平居中，和align="center"属性值有些相似。

注意：
使用auto属性值来对内容进行居中，必须准确的填写内容的总体宽度，auto以填写的宽度未居中标准。

语法：

margin: 0 auto;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!-- 
.margn{
    border:solid 2px #00ffff;
    margin:0 auto;
    width:300px;
    height:200px;
}
 -->
 </style>
</head>
<body>
 定义居中：
 <div class="margn"></div>
</body>
</html>

在这里插入图片描述

2.上外边距 margin-top

使标签内的内容与上边的其他文本内容隔开一定的距离

语法：
margin-top:边距值;

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!-- 
.margn{
    border:solid 2px #00ffff;
    margin-top:50px;
    width:300px;
    height:200px;
}
 -->
 </style>
</head>
<body>
 定义上外边距：
 <div class="margn"></div>
</body>

在这里插入图片描述

3.右外边距 margin-right 左外边距 margin-left 下外边距 margin-bottom

这3个属性分别设置右、左、下外边距，用法与上外边距类似，这里不再举例

4.综合声明外边距 margin

通过margin属性把 4 个不同外边距属性值全部放在一起，对4个外边距一起进行声明。

语法（例）：

1.margin:10px 20px 30px 40px; 综合声明上外边距为10px，右外边距为20px,下外边距为30px，左外边距为40px。
2.margin:20px 30px 40px; 综合声明上外边距为20px，右、左外边距为30px,下外边距为40px。
3.margin:10px 20px; 综合声明上、下外边距为10px，右、左外边距为20px。
4.margin:10px; 综合声明上、下、右、左外边距为10px。

内边距 padding

内边距与外边距正好相反，内边距是指用标签设置的内容内部的边距。通过内边距，可以很好的规定元素在标签设置的内部的显示位置。

1.上内边距 padding-top

通过padding-top属性可以设置上内边距，也就是标签设置的元素内的内容与元素顶部的距离
语法：

padding-top:n;

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!-- 
.padd{
    border:solid 2px #00ffff;
    padding-top:50px;
    width:300px;
    height:200px;
}
 -->
 </style>
</head>
<body>
 <div class="padd"> 定义上内边距：</div>
</body>