CSS margin属性取值

margin表示一个元素的外边距。取值为正值时，表示相对于正常流离邻近元素更远，而取负值时，使其更近

但是，设置margin后，四个方向的表现形式不同

自身发生移动：top、left

margin-top

<div id="negtive_top">
<div>margin-top: -50px;自身向上移动50px</div>
</div>

CSS

#negtive_top{
    background-color: green;
    border: 2px solid red;
}
#negtive_top div{
    background-color: yellow;
    border: 2px solid red;
    opacity: 0.5;
    margin-top: -50px;
}

margin-left

<div id="negtive_left">
<div>margin-left: -50px;自身向左移动50px</div>
</div>

CSS

#negtive_left{
    background-color: green;
    border: 2px solid red;
}
#negtive_left div{
    background-color: yellow;
    opacity: 0.5;
    margin-left: -50px;
    border: 2px solid red;
}

邻近元素移动：right、bottom

margin-right

<div id="negtive_right">margin-right: -50px;右边的元素向左移动50px</div>
<div></div>

CSS

#negtive_right{
    background-color: green;
    border: 2px solid red;
    float: left;    
    margin-right: -50px;
}
#negtive_right+div{
    background-color: yellow;
    opacity: 0.5;
    border: 2px solid red;
    float: left;
}

margin-bottom

<div id="negtive_bottom">margin-bottom: -50px;下方的元素向上移动50px</div>
<div></div>

CSS

#negtive_bottom{
    background-color: green;
    border: 2px solid red;    
    margin-bottom: -50px;
}
#negtive_bottom +div{
    background-color: yellow;
    opacity: 0.5;
    border: 2px solid red;
}

参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin