Question

css的margin为负值的时候为什么列表的第一行也会向上移动？

图一是没加margin的列表位置，图二是加了margin-top：5px的位置，图三是加了margin-top：-5px的位置。图二加了5px的段间距没什么问题，第一行也没动。但为什么图三设置为-5px，第一行“人生得意须尽欢”就会向上移动？还有它移动的路程也是5px吗？





Answer 1

其实你把ul和li都加上背景色就能看出端倪来的：

如果li的margin-top是正值（为了看得明白些，我用的是10px），是这样的：

红色部分是ul，蓝色则是li，最上面的黄色部分则是第一个li的margin-top（也就是10px），它是凸出在ul的外面的，这也就是说，如果margin-top是正值，则第一个li的位置会保持不变，从第二个li开始才是逐渐向下拉伸的（值得一提的是：如果li的margin-top大于ul的margin-top，则ul会以li的margin-top作为基准向下推，这时候第一个li就不会保持位置不变了）。

而当li的margin-top是负值时（比方说-10px），情况就不是这样了，第一个li会向上移动10px，而第二个li则移动20px，依此类推，连带着整个ul也会向上移动10px。