CSS Margin外边距
最后一次修改 2017年08月04日
Margin外边距是元素边界与其周围之间的距离。这包括其他元素和父元素。
以下列表包含外边距属性的说明。
margin-top
设置顶边的边距。
Value: auto length %margin-right
设置右边的边距。
Value: auto length %margin-bottom
设置底边的页边距。
Value: auto length %margin-left
设置左边的边距。
Value: auto length %margin
此简写属性在单个声明中设置所有边的边距。
Value: 1 - 4 auto length %
百分比值始终从包含块的宽度导出，即使用于填充顶部和底部边缘。
以下代码将Margin添加到元素。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
img {
border: 4px solid black;
background: lightgray;
padding: 4px;
margin: 4px 20px;
}
</style>
</head>
<body>
<img src="http://www.www.w3cschool.cn/style/download.png" alt="small banana">
<img src="http://www.www.w3cschool.cn/style/download.png" alt="small banana">
</body>
</html>对于内联元素，其边距不会显示在顶部和底部边缘。
Margin 简写属性
margin属性可以有一到四个值。
margin: 2px 5px 7px 9px; top margin is 2px right margin is 5px bottom margin is 7px left margin is 9px margin: 2px 5px 7px; top margin is 2px right and left margins are 5px bottom margin is 7px margin: 2px 5px; top and bottom margins are 2px right and left margins are 5px margin: 2px; all four margins are 2px
相关属性
| 属性 | 描述 | CSS |
|---|---|---|
| margin-bottom | 设置底部的边距 | 1 |
| margin-left | 设置左边距 | 1 |
| margin-right | 设置右边距 | 1 |
| margin-top | 设置顶边距 | 1 |
| margin | 设置四个方向的页边距 | 1 |
Margin外边距是元素边界与其周围之间的距离。这包括其他元素和父元素。
以下列表包含外边距属性的说明。
margin-top
设置顶边的边距。
Value: auto length %margin-right
设置右边的边距。
Value: auto length %margin-bottom
设置底边的页边距。
Value: auto length %margin-left
设置左边的边距。
Value: auto length %margin
此简写属性在单个声明中设置所有边的边距。
Value: 1 - 4 auto length %
百分比值始终从包含块的宽度导出，即使用于填充顶部和底部边缘。
以下代码将Margin添加到元素。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
img {
border: 4px solid black;
background: lightgray;
padding: 4px;
margin: 4px 20px;
}
</style>
</head>
<body>
<img src="http://www.www.w3cschool.cn/style/download.png" alt="small banana">
<img src="http://www.www.w3cschool.cn/style/download.png" alt="small banana">
</body>
</html>对于内联元素，其边距不会显示在顶部和底部边缘。
Margin 简写属性
margin属性可以有一到四个值。
margin: 2px 5px 7px 9px; top margin is 2px right margin is 5px bottom margin is 7px left margin is 9px margin: 2px 5px 7px; top margin is 2px right and left margins are 5px bottom margin is 7px margin: 2px 5px; top and bottom margins are 2px right and left margins are 5px margin: 2px; all four margins are 2px
相关属性
| 属性 | 描述 | CSS |
|---|---|---|
| margin-bottom | 设置底部的边距 | 1 |
| margin-left | 设置左边距 | 1 |
| margin-right | 设置右边距 | 1 |
| margin-top | 设置顶边距 | 1 |
| margin | 设置四个方向的页边距 | 1 |