CSS 外边距 margin

css_margin_1.png

图1

定义元素周围的空间,也就是与别的元素的距离。margin有4个方向可以设置,分别为:

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

实例1 :

div{
	width: 100px;
	height: 100px;
	margin-top:50px;
	margin-bottom:50px;
	margin-right:50px;
	margin-left:50px;
	background-color: #5F9EA0;
}
<div>块元素1</div>
<div>块元素2</div>

结果如下 :

css_margin_2.png

图2

块元素之间的margin-top 和 margin-bottom 会重合,也就是说,以上实例中的元素之间的距离为50px。

margin 简写

margin:10px 20px 30px 40px:

  • 上边距为15px
  • 右边距为20px
  • 下边距为30px
  • 左边距为40px

margin:10px 50px 30px:

  • 上边距为10px
  • 左右边距为50px
  • 下边距为30px

margin:25px 50px:

  • 上下边距为25px
  • 左右边距为50px

margin:25px: 所有的4个边距都是25px

margin的值也可以为百分比,如:margin-left:2%。