CSS 负边距

 在学习css外边距时，对负外边距的概念，以及负边距对整个布局的影响比较模糊，通过两天自己的摸索，对负边距的概念有一些了解，遂把自己的理解记录下来。示例所用代码会贴在最后。如有错误之处，还望指正。

垂直方向上的负上/下边距：先用两张图来说明负上/下边距具体包括那一部分，

 下面用一个动画来说明负上/下边距移动的时候对其本身及其布局的影响：

 结论：

1.垂直负边距和左右负边距一样，都是将边距往相反的方向拉。不同的是负上/左边距会使盒模型移动，负右/下边距会使其后的盒模型移动。其实很好理解，margin是两个元素之间的距离，负上/左决定的是本身盒子的位置，自然会引起移动，负右下边距决定的是其后的盒模型的位置，自然对其本身没有影响。

2.关于外边距的合并：合并的行为只应用于外边距，如果元素有内边距和边框，它们绝对不会合并。负边距也适用：如果父元素有边框、内边距或者高度，则其后的元素位置由父元素决定，否则由其子元素的下边距决定，此时如果负上边距变化，则会引起整体的移动，原因参考1。

 

3.负边距合并问题：如果垂直外边距都为负值，浏览器会取两个外边距绝对值最大的那个，如-10px和-50px，两者间距是-50px。

　　　　　　　　　如果垂直外边距为一正一负，则会是两者之和，如-50px和30px，两者间距为-20px。

 

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>Document4</title>
    <style type="text/css">
        p.neg {margin-top: 0;margin-right: 10px;margin-left: 10px;margin-bottom: -50px;border:3px solid gray;}
        p {margin:0;}
    </style>
</head>
<body>
    <p>first paragraph</p>
    <div style="width:420px;height:100px;margin-top:50px;background-color:silver;border:solid red 1px;">
        <p class="neg">A paragraph</p>
    </div>
    <p>The next paragraph</p>

</body></html>
View Code

 

posted @ 2016-06-08 17:00  浪浪的拐子  阅读(196)  评论(0)  编辑  收藏  举报