阅读(11.1k) 书签赞(4) 我要纠错

CSS Margin外边距

2018-10-27 17:09 更新

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="https://www.www.w3cschool.cn/style/download.png" alt="small  banana">
  <img src="https://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

CSS Margin外边距

Margin外边距是元素边界与其周围之间的距离。这包括其他元素和父元素。

Margin 简写属性

相关属性

推荐文章

推荐教程

推荐课程