在CSS中，负外边距是完全有效的，它们有如下有趣的行为：左边或上边的负外边距会把元素向左或向上拉，盖住其旁边的元素；右边或下边的负外边距会把相邻元素向左或向上拉，盖住设置了负外边距的元素
没有margin-top|bottom时的样子
添加了margin-top负值后，元素向上移动；添加了margin-bottom负值后，相邻元素向上移动，并覆盖负值元素
<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}
p.margin-negative-top {margin-top: -0.5em;}
p.margin-negative-bottom {margin-bottom: -0.5em;}
p.inline{display:inline;}
</style>
</head>
<body>
<p class=" green margin-negative-top ">margin-t- -0.5em</p>
<p class=" yellow">文字</p>
<p class=" green ">margin-t|b 0em</p>
<p class=" yellow">文字</p>
<p class=" green margin-negative-bottom ">margin-b- -0.5em</p>
<p class=" yellow">文字</p>
</body>
</html>
网友评论