一切都是框,所有框处于流动中,水将他们往一个方向推。
1、块级框
块级框所处水流大势是:往左、往上。负外边距是为了缩短框之间的距离。注意这里的水流大势是指有负margin的情况,本文讲的是负margin。
| margin-top负值,是将自己往上拉,使自己更近上一个块; margin-bottom负值,是将后面(下面)的元素往上拉,使下一个块更近自己; margin-left负值,是将自己往左拉,使自己更近左边的块。但是块级元素自己一行,没有左边元素,所以只能看到自己左移了。例外:父元素定宽,本元素不定宽时,不会整体左移,而是向左拉长自己。 margin-right负值,是将后面(右边)的元素往左拉近自己。但是块级元素自己一行,没有右边的元素,拉了也没用。例外:父元素定宽,本元素不定宽时,拉了有效果哦,会向右拉长自己。 |
块级框有一个纵向流、两个横向流(外横向、内横向)。
1)纵向流目标往上,设置margin-top负值和margin-bottom负值,都是向上拉进框之间的距离。

2)外横向流目标往左,控制框外部流向。
设置margin-left:-10px,则块元素左移10px。 |


3)内横向流,控制框内部宽度。使不定宽子块级元素的width + padding-left + padding-right + border-left + border-right + margin-left +margin-right=父元素的宽。当加数出现负数,那其他加数的正数数值将增大,使和不变。增大的部分内横向流会填满它。
给一个定宽的块级框设置左负边距会让他左移,设置右负边距对他没有影响。原理是上面讲的外横向流。
给一个不定宽的块级框设置正边距会让他的宽度减小,设置负边距会让他的宽度增加:
| 设置margin-left正值 ,要拉开与左边元素的距离,则border-right不动,而块框自己一行左边是没有元素的,只能自己缩短以空出这个距离。 设置margin-right正值 ,要拉开与右边元素的距离,则border-left不动,而块框自己一行右边是没有元素的,只能自己缩短以空出这个距离。 设置margin-left负值 ,要缩短与左边元素的距离,则border-right不动,而块框自己一行左边是没有元素的,套不了近乎就伸着左手出去弥补这个负距离。 设置margin-right负值 ,要缩短与右边元素的距离,则border-left不动,而块框自己一行右边是没有元素的,套不了近乎就伸着右手出去弥补这个负距离。 |


2、行级框
行级框只有一个横向流,因为纵向的margin值对于行内级框来说无效的。
无论是direction: ltr 还是direction: rtl,水流方向都是往左。


本文探讨了CSS中负margin在块级框和行级框中的作用。在块级框中,负margin-top和margin-bottom用于缩短上下框间距,负margin-left可使元素左移。而对于不定宽的块级框,负margin能增加其宽度。行级框的margin值在垂直方向无效,只存在横向水流,无论文字方向如何,元素均向左移动。

被折叠的 条评论
为什么被折叠?



