极客笔记CSS 负的margin-left生效良好，负的margin-right会创建滚动条
在本文中，我们将介绍CSS中的负边距（negative margin）的用法和效果。特别是，我们将探讨负的margin-left和负的margin-right在布局中产生的不同结果。
负的margin-left是指元素的左外边距（margin）为负值。在使用负的margin-left时，元素的左边界会向左移动，这样就可以实现元素的左侧空间变大。这对于创建特殊的布局效果非常有用。
下面是一个示例，展示了负的margin-left的效果：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: lightgray;
overflow: auto;
width: 300px;
}
.box {
background-color: lightblue;
width: 100px;
height: 100px;
margin-left: -20px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
在这个示例中，我们创建了一个灰色背景的容器（container），容器的宽度为300像素。容器中有三个蓝色的方块（box），宽度是100像素，高度也是100像素。通过给box元素设置负的margin-left为-20像素的值，每个盒子都会向左移动20像素，从而在每个盒子之间创建了额外的空间。由于我们给容器设置了”overflow: auto”的样式，当元素的内容超出容器的宽度时，会自动出现水平滚动条，以便滚动查看所有的盒子。
相反，负的margin-right则会创建滚动条。在布局中使用负的margin-right时需要格外注意这一点。下面是一个示例，展示了负的margin-right会创建滚动条的情况：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: lightgray;
overflow: auto;
width: 300px;
}
.box {
background-color: lightblue;
width: 100px;
height: 100px;
margin-right: -20px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
在这个示例中，我们使用了与前一个示例相同的样式，但是将box元素的margin-left改为margin-right为负的20像素。结果是，为了适应负的margin-right，容器会出现水平滚动条，以便滚动查看所有的盒子。这是因为负的margin-right会扩大元素的右侧空间，而当右侧空间超出容器的宽度时，就会出现滚动条。
阅读更多：CSS 教程
总结
通过本文，我们了解了CSS中负边距的使用和效果。负的margin-left可以用来扩大元素的左侧空间，从而实现特殊的布局效果，而负的margin-right则会导致发生滚动条。在使用负的margin-right时，需要谨慎考虑布局的需要，以避免出现水平滚动条的情况。熟练掌握负边距的使用可以帮助我们更好地实现复杂的布局需求。