CSS 负外边距

CSS margin负外边距总结

（1）、外边距叠加

  <1>、对于水平相邻的元素，它们之间的水平间距为两个元素的外边距叠加,即margin-right + margin-left。

  <2>、对于上下紧挨着的元素，它们之间的垂直间距为两个元素中外边距最大的那个，即max{margin-bottom，margin-top}。

    注：margin-bottom，margin-right是上边的元素属性，margin-top,margin-left为下面元素的属性

（2）、盒子模型的宽度----(结论一二摘自《CSS设计指南》)

  <1>、结论一：没有（就是设置width的）宽度的元素始终会扩展到填满其父元素的宽度为止。添加水平边距a、内边距b和外边距c，会导致内容宽度减少，减少量等于水平边框、内边距和外边距的和，即减少量为2*（a+b+c）。

  <2>、结论二：为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展的更宽。实际上，盒子的width属性设定的只是盒子内容区的宽度，而非盒子要占据的水平宽度。

  结论一和二可以理解为，如果没有设置width时，子元素总会调整自身的大小从而不会撑大父元素或者溢出父元素，而设置了width，说明了这个值是开发者所重视的，从而在保证这个值不变的情况下，把盒子扩展的更宽。

（3）、上面（1）因为跟外边距有关，顺便提及，而（2）则对将提到的外边距的理解有帮助。

   CSS中的元素默认会按照文档流进行排放。我们可以通过position中的relative（其余属性对下文无帮助，不涉及）来改变元素的位置，但此时该元素在文档流的位置没有移动，只是自己相对与原始位置挪动了一下，总而言之，通过设置relative不会影响原有页面的文档流。现在可以来谈负外边距了，它跟relative不同，因为它会影响页面的文档流。假设将margin-top设置为-20px；则该元素会向上移动20px，该元素上面的元素在文档流中位置保持不变，下面元素相对之前的位置会向上移动20px，当然负左，右，下外边距也是。

现在针对（2）中谈及的有无设置width，如果设置了负外边距的情况

<1>、如果没有设置width，设置负左右外边距，会导致元素的宽度增加，增加的值为负外边距的值。

<2>、有width，设置负左右边距，不会影响width的大小，但是会导致元素向左右移动。

    其实我们可以用（2）中的结论来理解（3）中的结论。有width时，无论是有无外边距，都不会影响到width的大小。举例，设置了正左外边距会使元素向右移动，同样，设置了负左外边距，则会向右移动。无width，元素总会完全占据父元素的空间，设置了正左边距，元素还是完全占据了父元素的空间，只是width的大小变化了而已，而设置了负左外边距，元素会向左移动，但是右边又会相应空出，由于无width时，子元素总会尝试去占据父元素的空间，所以总是同样会去占据刚刚腾出的空间。