整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
象描述
真正意義上的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小時內與您取得聯系。
