margin外边距

        margin用于设置对象标签之间距离间隔,比如2个上下排列的DIV盒子,我们就可以使用margin样式实现上下2个盒子间距。Margin呈现是位于对象边框外侧,紧贴于边框。


margin是设置对象外边距外延边距离。
margin的值有三种情况,可以为正整数和负整数并加单位如PX像素(margin-left:20px);可以为auto自动属性(margin-left:auto 自动);可以为百分比(%)值(margin-left:3%)。

Margin延伸(单独设置四边间距属性单词)
margin-left 对象左边外延边距 (margin-left:5px; 左边外延距离5px)
margin-right 对象右边外延边距 (margin-right:5px; 右边外延距离5px)
margin-top 对象上边外延边距 (margin-top:5px; 上边外延距离5px)
margin-bottom 对象下边外延边距 (margin-bottom:5px; 下边外延距离5px)


1、只有上下情况缩写
原始:margin-top:5px; margin-bottom:6px
缩写简写为:margin:5px 0 6px 0或margin:5px auto 6px auto

2、只有左右情况缩写
原始:margin-left:5px; margin-right:6px
缩写简写为:margin:0 6px 0 5px或margin:auto 6px auto 5px

3、只有三边情况缩写
原始:margin-top:5px; margin-bottom:6px; margin-left:4px
缩写:margin:5px 0 6px 4px或margin:5px auto 6px 4px

4、四边相同值缩写
原始:margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px
缩写:margin:5px;

5、四边不同值缩写
原始:margin-top:5px; margin-bottom:6px; margin-left:7px; margin-right:8px
缩写:margin:5px 8px 6px 7px;(上右下左)

6、四边其中上下值和左右值各相同缩写

上下相同、左右相同原始:margin-top:5px; margin-bottom:5px; margin-left:7px; margin-right:7px
缩写:margin:5px 7px;



猜你喜欢

转载自blog.csdn.net/hnkuo/article/details/53363265
今日推荐