其实你把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。
margin取负值之后，例如margin-top:-1px元素会从父框架的顶部突出一个像素，如果父框架设置了overflow:visibled的话，这个元素就会看起来显示在父框架外面了,如果取了正值，例如margin-top:1px元素就是距离父框架的顶部一个像素，会在父框架内显示。
padding取了负值之后是没有任何效果的，浏览器会认为padding:0。如果padding取正值，就是在元素内部填充，这个很好理解。position取了负值之后的效果和margin差不多，只是position通常是应用绝对定位场景的，而margin通常是应用在相对定位场景的，而且position可以定义z轴上的位置关系，但是margin一般是不可以的，两个的区别主要是在这个方面，至于取负值，在视觉上其实没有什么太大的区别。
尊敬的用户，您好！很高兴为您答疑。css的margin属性的负值本身不存在兼容不兼容的问题，推测您是打算使用负值实现一些样式上的特殊要求，最正确的办法还是通过使用hack的方式进行css样式兼容。
希望我的回答对您有所帮助，如有疑问，欢迎继续咨询我们。
