整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
象描述
真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：
两个相邻的radio之间总是多那么一点点的间距，不是margin也不是padding，但是设计妹纸不干了！！！
我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题：
.space a {
display: inline-block;
padding: .5em 1em;
background-color: #cad5eb;
}
<div class="space">
<a href="##">惆怅</a>
<a href="##">淡定</a>
<a href="##">热血</a>
</div>
这种表现是符合规范的应该有的表现
不过，这类间距有时会对我们布局，或是兼容性处理产生影响，需要去掉它，该怎么办呢？以下展示N种方法（欢迎补充）！
元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以：
<div class="space"> <a href="##"> 惆怅</a><a href="##"> 淡定</a><a href="##"> 热血</a> </div>
或者是：
<div class="space"> <a href="##">惆怅</a ><a href="##">淡定</a ><a href="##">热血</a> </div>
或者是借助HTML注释：
<div class="space"> <a href="##">惆怅</a><!-- --><a href="##">淡定</a><!-- --><a href="##">热血</a> </div>
.space a {
display: inline-block;
margin-right: -3px;
}
margin负值的大小与上下文的字体和文字大小相关，其中，间距对应大小值可以参见我之前“基于display:inline-block的列表布局”一文part 6的统计表格：
例如，对于12像素大小的上下文，Arial字体的margin负值为-3像素，Tahoma和Verdana就是-4像素，而Geneva为-6像素。
由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题，这个方法不适合大规模使用。
如下处理：
<div class="space"> <a href="##">惆怅 <a href="##">淡定 <a href="##">热血</a> </div>
注意，为了向下兼容IE6/IE7等喝蒙牛长大的浏览器，最后一个列表的标签的结束（闭合）标签不能丢。
在HTML5中，我们直接：
<div class="space"> <a href="##">惆怅 <a href="##">淡定 <a href="##">热血 </div>
好吧，虽然感觉上有点怪怪的，但是，这是OK的。
您可以狠狠地点击这里：无闭合标签去除inline-block元素间距demo
类似下面的代码：
.space {
font-size: 0;
}
.space a {
font-size: 12px;
}
这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器，就是Chrome, 其默认有最小字体大小限制，因为，考虑到兼容性，我们还需要添加：
类似下面的代码：
.space {
font-size: 0;
-webkit-text-size-adjust:none;
}
您可以狠狠地点击这里（去年制作的一个简单demo）：font-size:0清除换行符间隙demo
补充：根据小杜在评论中中的说法，目前Chrome浏览器已经取消了最小字体限制。因此，上面的-webkit-text-size-adjust:none;代码估计时日不多了。
类似下面的代码：
.space {
letter-spacing: -3px;
}
.space a {
letter-spacing: 0;
}
根据我去年的测试，该方法可以搞定基本上所有浏览器，包括吃“东鞋”、“西毒(胶囊)”、“南地(沟油)”、“北钙(三鹿)”的IE6/IE7浏览器，不过Opera浏览器下有蛋疼的问题：最小间距1像素，然后，letter-spacing再小就还原了。
类似下面代码：
.space {
word-spacing: -6px;
}
.space a {
word-spacing: 0;
}
一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。据我测试，word-spacing的负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，貌似，word-spacing即使负值很大，也不会发生重叠。
您可以狠狠地点击这里：word-spacing与元素间距去除demo
与上面demo一样的效果，这里就不截图展示了。如果您使用Chrome浏览器，可能看到的是间距依旧存在。确实是有该问题，原因我是不清楚，不过我知道，可以添加display: table;或display:inline-table;让Chrome浏览器也变得乖巧。
.space {
display: inline-table;
word-spacing: -6px;
}
下面展示的是YUI 3 CSS Grids 使用letter-spacing和word-spacing去除格栅单元见间隔方法（注意，其针对的是block水平的元素，因此对IE8-浏览器做了hack处理）：
.yui3-g {
letter-spacing: -0.31em; /* webkit */
*letter-spacing: normal; /* IE < 8 重置 */
word-spacing: -0.43em; /* IE < 8 && gecko */
}
.yui3-u {
display: inline-block;
zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
}
以下是一个名叫RayM的人提供的方法：
li {
display:inline-block;
background: orange;
padding:10px;
word-spacing:0;
}
ul {
width:100%;
display:table; /* 调教webkit*/
word-spacing:-1em;
}
.nav li { *display:inline;}
也就是上面一系列CSS方法的组组合合。
结语
其他去除间距的方法肯定还有，欢迎大家通过评论方式进行补充。上文部分方法可能有测试不周全之处，因此，部分细节上可能会有纰漏，欢迎指正。
最后，推荐几本书
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
/*总体的样式*/
<style>
/*盒子样式*/
#box{
width: 350px; //宽
height: 450px; //高
border: 1px solid black; //边框
border-radius: 10px; //边框弧度
font-family: 黑体; //字体
letter-spacing:8px; //段间距
word-spacing: 10px; //字间距
line-height: 40px; //行高
font-size: 18px; //字大小
padding: 20px; //内边框
}
/*给'注册'赋予样式*/
.register{
width:280px ; //宽
height: 50px; //高
background-color: skyblue; //背景颜色
border-radius: 10px; //边框弧度
}
/*将所有边框都改变*/
*{
border-radius: 5px; 边框弧度
}
/*使用class选择器，赋予number宽高和边框*/
.number{
width: 185px; //宽
height: 27px; //高
border-width: 1px; //边框宽度
}
/*id选择器*/
#two{
width: 55px; //宽
border-width: 1px; 边框宽度
}
/*id选择器*/
#phone{
width: 103px; //宽
}
/*class 选择器*/
.boxs{
zoom: 75%; //清除浮动
color: darkgray; //颜色
}
/*class选择器*/
.box_a{
width: 50px; //宽
height: 50px; //高
background-image: url("../image/04.jpg "); //背景图片
background-repeat: no-repeat; // 是否平铺
background-size: 50px 25px; //背景尺寸
position: relative; //定位 相对定位
left: 310px; //定位后左移
bottom: 32px; //定位后下移
}
</style>
</head>
<body>
<div id="box">
<h1>请注册</h1>
<p style="color: darkgray">已有帐号?<a href="https://im.qq.com/index">登录</a></p>
<form action="" method="post">
<label for="name">用户名</label>
<input type="text" placeholder="请输入用户名" id="name" class="number"> <br>
<label for="phone">手机号</label>
<select name="" id="two" class="number">
<optgroup>
<option style="" class="">+86</option>
</optgroup>
</select>
<input type="text" placeholder="请输入手机号" id="phone" class="number"> <br>
<label for="mima">密 码</label>
<input type="password" placeholder="请输入密码" id="mima" class="number"> <br>
<label for="mima">验证码</label>
<input type="password" placeholder="请输入验证码" id="is" class="number">
<div class="box_a"></div>
<div class="boxs">
<input type="radio" id="" class="accept">阅读并接受协议<br>
</div>
<input type="submit" value="注册" class="register" >
</form>
</div>
</body>
</html>
在这里插入图片描述argin（外边距）是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可能会对其位置和布局产生复杂的影响，需要谨慎使用。
*请认真填写需求信息，我们会在24小时内与您取得联系。
