Question

css中关于margin-top为负值，为什么没有上移。

.box1{
display: inline-block;
width: 200px;
height: 100px;
background-color: gold;
margin-top: -100px;
margin-left: -100px;
}
.box2{
display: inline-block;
width: 200px;
height: 100px;
background-color: green;
}

<div class='box1'></div>
<div class='box2'></div>
box1为什么没有上移，只是左移100px？
如果把box2里加个margin-top：-100px；box1与box2同时上移。

Answer 1

原则上，行内元素（inline）是不能够设置宽高（width/height）、上下内边距（padding-top/padding-bottom）和上下外边距（margin-top/margin-bottom），因为同一行的所有行内元素在纵向的位置是一个整体，设置其中某个元素的上下边距，则整行都会跟随变化，当超出边框范围时（比如margin-top设为负值）则无效（除非行内的所有元素都设为同样的数值）。
当然，行内块级元素（inline-block）是可以设置宽高（width/height）的，但在上下边距的问题上仍然遵循行内元素的原则。
如果把display改为block，你会发现设为margin-top:-100px的box1立刻就上移了。

追问

为什么如果把box2里加个margin-top：-100px；box1与box2同时上移