CSS 外边距 margin
定义元素周围的空间,也就是与别的元素的距离。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>
结果如下 :
块元素之间的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%。