淘先锋技术网

首页 1 2 3 4 5 6 7

CSS Margin外边距 - 编程基础教程

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