在CSS中，负外边距是完全有效的，它们有如下有趣的行为：左边或上边的负外边距会把元素向左或向上拉，盖住其旁边的元素；右边或下边的负外边距会把相邻元素向左或向上拉，盖住设置了负外边距的元素
没有设置margin时
三行字符数相同的文本。第一行是margin-left负值，第二行没有margin，第三行margin-right负值
<html>
<head>
<style type="text/css">
body{padding:0;margin:0;background-color:#bbb;
font-family: monospace;
/*等宽字体*/
}
p{outline:0px solid red;}
p{margin-left:0;margin-right:0;}
p{margin-top:0;margin-bottom:0;}
.yellow{background-color:yellow;}
.green{background-color:green}
/*margin-left负值，会让元素向左移动*/
p.margin-negative-left {margin-left: -1em;outline:0px solid blue;}
/*margin-right负值，会让相邻元素向左移动，并盖住负值的元素*/
p.margin-negative-right {margin-right: -1em;outline:0px solid purple;}
p.inline{display:inline;}
</style>
</head>
<body>
<!-- 为了让p元素在设置为display:inline后没有空白，只保留了一个</p>-->
<p class="inline green margin-negative-left ">margin-l- -1em
<p class="inline yellow">inline文字
<p class="inline green ">margin-l|r 0em
<p class="inline yellow">inline文字
<p class="inline green margin-negative-right ">margin-r- -1em
<p class="inline yellow">inline文字</p>
</body>
</html>
网友评论