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: 100px 110px 120px 130px;
/* 合写margin属性。直接后边跟3个值:分别代表 上 左右 下*/
margin: 100px 120px 130px;
/* 合写margin属性。直接后边跟2个值:分别代表 上下 左右*/
margin: 100px 130px;
/* 合写margin属性。直接后边跟1个值:代表所有方向都是这个值*/
margin: 100px;
二。负margin
负margin（Negative Margin）是指在CSS中。将元素的外边距设置为负值。从而使该元素的内容向外移动。与相邻元素重叠或者超出容器边界的一种技术。
2.1 静态元素的负margin
静态元素（static positioned element）指的是元素的position属性设置为static（默认值）时的状态。此时元素不受top。right。bottom。left等属性的影响。位置由文档流控制。
对于静态元素。应用负Margin的效果是将元素的位置向外偏移。具体来说。如果给一个静态元素设置负的margin-top值。那么元素会向上偏移。
如果设置的是top和left。那么元素会向如图所示的方向移动；
如果设置的是right和bottom。元素不会移动。而元素后的内容会随着箭头过来覆盖当前元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
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 class="box1"></div>
<div class="box2">负margin</div>
<div class="box3"></div>
</body>
</html>
2.2 针对浮动元素设置负margin
若两个元素都为浮动。且.box1的元素设定margin-right为20px。这样.box2会认为.box1的宽度比原来宽度缩短了20px（因此会导致重叠）。但有意思的是。.box1的内容不受影响。保持原有的宽度。
如果负margin等于实际宽度。则元素会被完全覆盖。这是因为元素的完全宽度等于margin。padding。border。width相加而成。所以如果负margin等于余下三者的和。那元素的实际宽度也就变成了0px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: coral;
float: left;
/* margin-right: -20px; */
margin-right: -100px;
}
.box2 {
width: 100px;
height: 100px;
background-color: greenyellow;
float: left;
}
</style>
</head>
<body>
<div class="box1">负margin</div>
<div class="box2"></div>
</body>
</html>
三。margin负值4种常见应用
3.1 左右列固定。中间列自适应布局
此例适用于左右栏宽度固定。中间栏宽度自适应的布局。由于网页的主体部分一般在中间。很多网页都需要中间列优先加载。而这种布局刚好满足此需求。
<body>
<!-- HTML -->
<div class="main">
<div class="main_body">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
</body>
<style>
/* CSS样式 */
body {
margin: 0;
padding: 0;
min-width: 600px;
}
.main {
float: left;
width: 100%;
}
.main_body {
margin: 0 210px;
background: #888;
height: 200px;
}
.left。
.right {
float: left;
width: 200px;
height: 200px;
background: #f60;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
</style>
3.2 去除列表右边框
项目中经常会使用浮动列表展示信息。为了美观通常为每个列表之间设置一定的间距（margin-right）。当父元素的宽度固定。每一行的最右端的li元素的右边距就多余了。去除的方法通常是为最右端的li添加class。设置margin-right:0; 这种方法需要动态判断为哪些li元素添加class。麻烦！！！利用负margin就可以实现下面这种效果：
<body>
<!-- HTML -->
<div id="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: 320px;
height: 210px;
background: #ccc;
}
#test ul {
margin-right: -10px;
zoom: 1;
}
#test ul li {
width: 100px;
height: 100px;
background: #f60;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
</style>
3.3 负边距+定位：水平垂直居中
使用绝对定位将div定位到body的中心。然后使用负margin（content宽高的一半）。将div的中心拉回到body的中心。已到达水平垂直居中的效果。
<body>
<!-- HTML -->
<div class="box">
<div id="test"></div>
</div>
</body>
<style>
/* CSS样式 */
.box {
width: 400px;
height: 200px;
position: relative;
border: 1px solid black;
}
#test {
width: 200px;
height: 100px;
background: #f60;
position: absolute;
left: 50%;
top: 50%;
/* 值为自身宽度一半 */
margin-left: -100px;
/* 值为自身高度一半 */
margin-top: -50px;
}
</style>
3.4 去除列表最后一个li元素的border-bottom
列表中我们经常会添加border-bottom值。最后一个li的border-bottom往往会与外边框重合。视觉上不雅观。往往要移除。
<body>
<!-- HTML -->
<ul id="test">
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</body>
<style>
/* CSS样式 */
body。
ul。
li {
margin: 0;
padding: 0;
}
ul。
li {
list-style: none;
}
#test {
margin: 20px;
width: 300px;
background: #f4f8fc;
border-radius: 3px;
border: 2px solid #d7e2ec;
}
#test li {
height: 25px;
line-height: 25px;
padding: 5px;
border-bottom: 1px dotted #d5d5d5;
margin-bottom: -1px;
}
</style>
总结
总的来说。负Margin是一种在CSS布局中非常有用的技巧。可以用于微调元素的位置。调整元素的层叠顺序。消除元素之间的空隙等。
在静态元素中。应用负Margin可以将元素的位置向外偏移。但是需要注意避免元素重叠。影响布局效果。在非静态定位的元素中。负Margin可能会对其位置和布局产生复杂的影响。需要谨慎使用。
本文地址：https://gpu.xuandashi.com/77616.html，转载请说明来源于：渲大师
声明：本站部分内容来自网络，如无特殊说明或标注，均为本站原创发布。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。分享目的仅供大家学习与参考，不代表本站立场！
