Margin（外边距）是CSS中的一种盒子模型属性，用于控制元素周围的空白区域大小。Margin属性可以用来控制元素与其他元素之间的间距、元素与边框之间的间距、元素与视口边界之间的间距等。我们在CSS中都会使用margin，但将margin设置成负数，那可能就不大好处理了。在网页设计中，人们对负margin用法的态度矛盾很大，有的人非常喜欢，而有的人则非常讨厌。
一、margin属性
Margin属性有以下一些属性值：
1.margin-top:设置元素上方的外边距大小；
2.margin-right:设置元素右侧的外边距大小；
3.margin-bottom:设置元素下方的外边距大小；
4.margin-left:设置元素左侧的外边距大小；
5.margin:可以同时设置四个方向的外边距大小；
-合写margin属性,直接后边跟4个值:分别代表上右下左
-合写margin属性,直接后边跟3个值:分别代表上左右下
-合写margin属性,直接后边跟2个值:分别代表上下左右
-合写margin属性,直接后边跟1个值:代表所有方向都是这个值
Margin属性的值可以为像素（px）、百分比（%）、em等单位，也可以为auto、inherit等关键字。以下是Margin属性的一些常用用法：
/*分别设置每个方向的外边距：*/
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
/*合写margin属性,直接后边跟4个值:分别代表上右下左*/
margin:pxpxpxpx;
/*合写margin属性,直接后边跟3个值:分别代表上左右下*/
margin:pxpxpx;
/*合写margin属性,直接后边跟2个值:分别代表上下左右*/
margin:pxpx;
/*合写margin属性,直接后边跟1个值:代表所有方向都是这个值*/
margin:px;
二、负margin
负margin（NegativeMargin）是指在CSS中，将元素的外边距设置为负值，从而使该元素的内容向外移动，与相邻元素重叠或者超出容器边界的一种技术。
2.1静态元素的负margin
静态元素（staticpositionedelement）指的是元素的position属性设置为static（默认值）时的状态，此时元素不受top、right、bottom、left等属性的影响，位置由文档流控制。
对于静态元素，应用负Margin的效果是将元素的位置向外偏移。具体来说，如果给一个静态元素设置负的margin-top值，那么元素会向上偏移。
如果设置的是top和left，那么元素会向如图所示的方向移动；
如果设置的是right和bottom，元素不会移动，而元素后的内容会随着箭头过来覆盖当前元素。
!DOCTYPEhtml
html
head
metacharset="UTF-8"/
titleTitle/title
style
div{
width:px;
height:px;
margin:10px;
}
.box1{
background-color:red;
}
.box2{
background-color:bisque;
margin-top:-30px;
margin-left:-30px;
margin-right:-30px;
margin-bottom:-30px;
}
.box3{
background-color:coral;
}
/style
/head
body
div/div
div负margin/div
div/div
/body
/html
2.2针对浮动元素设置负margin
若两个元素都为浮动，且.box1的元素设定margin-right为20px。这样.box2会认为.box1的宽度比原来宽度缩短了20px（因此会导致重叠）。但有意思的是，.box1的内容不受影响，保持原有的宽度。
如果负margin等于实际宽度，则元素会被完全覆盖。这是因为元素的完全宽度等于margin，padding，border，width相加而成，所以如果负margin等于余下三者的和，那元素的实际宽度也就变成了0px。
!DOCTYPEhtml
html
head
metacharset="UTF-8"/
titleTitle/title
style
.box1{
width:px;
height:px;
background-color:coral;
float:left;
/*margin-right:-20px;*/
margin-right:-px;
}
.box2{
width:px;
height:px;
background-color:greenyellow;
float:left;
}
/style
/head
body
div负margin/div
div/div
/body
/html
三、margin负值4种常见应用
3.1左右列固定，中间列自适应布局
此例适用于左右栏宽度固定，中间栏宽度自适应的布局。由于网页的主体部分一般在中间，很多网页都需要中间列优先加载，而这种布局刚好满足此需求。
body
!--HTML--
div
divMain/div
/div
divLeft/div
divRight/div
/body
style
/*CSS样式*/
body{
margin:0;
padding:0;
min-width:px;
}
.main{
float:left;
width:%;
}
.main_body{
margin:px;
background:#;
height:px;
}
.left,
.right{
float:left;
width:px;
height:px;
background:#f60;
}
.left{
margin-left:-%;
}
.right{
margin-left:-px;
}
/style
3.2去除列表右边框
项目中经常会使用浮动列表展示信息，为了美观通常为每个列表之间设置一定的间距（margin-right）,当父元素的宽度固定，每一行的最右端的li元素的右边距就多余了，去除的方法通常是为最右端的li添加class，设置margin-right:0;这种方法需要动态判断为哪些li元素添加class，麻烦！！！利用负margin就可以实现下面这种效果：
body
!--HTML--
divid="test"
ul
li子元素1/li
li子元素2/li
li子元素3/li
li子元素4/li
li子元素5/li
li子元素6/li
/ul
/div
/body
style
/*CSS样式*/
body,
ul,
li{
padding:0;
margin:0;
}
ul,
li{
list-style:none;
}
#test{
width:px;
height:px;
background:#ccc;
}
#testul{
margin-right:-10px;
zoom:1;
}
#testulli{
width:px;
height:px;
background:#f60;
margin-right:10px;
margin-bottom:10px;
float:left;
}
/style
3.3负边距+定位：水平垂直居中
使用绝对定位将div定位到body的中心，然后使用负margin（content宽高的一半），将div的中心拉回到body的中心，已到达水平垂直居中的效果。
body
!--HTML--
div
divid="test"/div
/div
/body
style
/*CSS样式*/
.box{
width:px;
height:px;
position:relative;
border:1pxsolidblack;
}
#test{
width:px;
height:px;
background:#f60;
position:absolute;
left:50%;
top:50%;
/*值为自身宽度一半*/
margin-left:-px;
/*值为自身高度一半*/
margin-top:-50px;
}
/style
3.4去除列表最后一个li元素的border-bottom
列表中我们经常会添加border-bottom值，最后一个li的border-bottom往往会与外边框重合，视觉上不雅观，往往要移除。
body
!--HTML--
ulid="test"
liTest/li
liTest/li
liTest/li
/ul
/body
style
/*CSS样式*/
body,
ul,
li{
margin:0;
padding:0;
}
ul,
li{
list-style:none;
}
#test{
margin:20px;
width:px;
background:#f4f8fc;
border-radius:3px;
border:2pxsolid#d7e2ec;
}
#testli{
height:25px;
line-height:25px;
padding:5px;
border-bottom:1pxdotted#d5d5d5;
margin-bottom:-1px;
}
/style
总结
总的来说，负Margin是一种在CSS布局中非常有用的技巧，可以用于微调元素的位置、调整元素的层叠顺序、消除元素之间的空隙等。
在静态元素中，应用负Margin可以将元素的位置向外偏移，但是需要注意避免元素重叠，影响布局效果。在非静态定位的元素中，负Margin可能会对其位置和布局产生复杂的影响，需要谨慎使用。