如何刪除div元素之間的餘量

爲什麼div之間有餘量？我試圖通過不同的方法刪除它，但沒有任何工作。我不得不減小它們的寬度以將它們堆疊成行。如何刪除div元素之間的餘量

*{ 
 
    box-sizing: border-box; 
 
} 
 

 
.wrapper{ 
 
    background-color: #ccc; 
 
    width: 500px; 
 
    margin: 5% auto; 
 
    padding: 0; 
 
} 
 

 
.box{ 
 
    display: inline-block; 
 
    margin: 0px; 
 
    background-color: #f1f1f1; 
 
    width: 248px; 
 
    height: 250px; 
 
    border: 0 !important; 
 
    font-size: 0; 
 
}

<div class="wrapper"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

來源

2017-01-25 nrgwsth

這裏沒有空格帶框 –

試試font-size：0px;因爲在你的html代碼中你的div之間有一個空格。 – phip1611

問題已在此處得到解答 - http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements – Larrydx

由於您的display: inline-blocks，空格顯示在您的塊元素之間。

有許多決議相同的，請參閱David Walsh's blog

我寧願在這裏做的是使用float而不是display: inline-block。

參考代碼：

*{ 
 
    box-sizing: border-box; 
 
} 
 

 
.wrapper{ 
 
    background-color: #ccc; 
 
    width: 500px; 
 
    margin: 5% auto; 
 
    padding: 0; 
 
} 
 

 
.box{ 
 
    float: left; 
 
    margin: 0px; 
 
    background-color: #f1f1f1; 
 
    width: 248px; 
 
    height: 250px; 
 
}

<div class="wrapper"> 
 
    <div class="box"> 
 
    
 
    </div> 
 
    <div class="box"> 
 
    
 
    </div> 
 
    <div class="box"> 
 
    
 
    </div> 
 
    <div class="box"> 
 
    
 
    </div> 
 
</div>

來源

2017-01-25 12:07:06 nashcheez

嘗試設置的影響，曾經我也有類似的問題，發現的div被繼承這是打破寬度1px的邊界的所有div border: 0 !important。

來源

2017-01-25 12:01:05 ghego1

無法正常工作。 divs沒有邊界。 – nrgwsth

問題是div之間有空格。兩種可能的解決方案：

1：

<div class="wrapper"> 
    <div class="box"> 

    </div><div class="box"> 

    </div><div class="box"> 

    </div><div class="box"> 

    </div> 
</div>

.box { display: block; } // not multiple elements in one line, if you want this

2：

.wrapper { font-size: 0px; } 
.box { display: block; } // not multiple elements in one line, if you want this

來源

2017-01-25 12:04:35 phip1611

製作的.box的250像素的寬度和添加的「浮動的屬性：左'to .box

.box{ 
display: inline-block; 
margin: 0px; 
padding: 0; 
background-color: #ff9900; 
width: 250px; 
height: 250px; 
float: left; 
}

Fiddle

來源

2017-01-25 12:04:54

您展示他們爲內聯塊，所以仍然被顯示在你的代碼格式之間的空白，就像它將如果他們當時任何其他內聯元素。

您需要重新格式化您的代碼，或者將包裝器設置爲零字體大小，以免它們呈現。

來源

2017-01-25 12:05:38 Michael

它不是利潤率是什麼兩者之間造成空間的div其原因顯示：已添加到框類inline-block的，只需添加浮動：剩下;相同，它會消失。

*{ 
 
    box-sizing: border-box; 
 
} 
 

 
.wrapper{ 
 
    background-color: #ccc; 
 
    width: 500px; 
 
    margin: 5% auto; 
 
    padding: 0; 
 
} 
 

 
.box{ 
 
display: inline-block; 
 
margin: 0px !important; 
 
background-color: #f1f1f1; 
 
width: 248px; 
 
height: 250px; 
 
border: 0 !important; 
 
float: left; 
 
}

<div class="wrapper"> 
 
    <div class="box" style="background: rebeccapurple;"> 
 
    
 
    </div> 
 
    <div class="box" style="background: orange;"> 
 
    
 
    </div> 
 
    <div class="box" style="background: orange;"> 
 
    
 
    </div> 
 
    <div class="box" style="background: rebeccapurple;"> 
 
    
 
    </div> 
 
</div>

來源

2017-01-25 12:17:57 WebSwami

嘗試使用

*{ 
    box-sizing: border-box; 
} 

.wrapper{ 
    background-color: #ccc; 
    width: 500px; 
    margin: auto; 
    padding: 0; 
    display: block; 
    background: green; 
} 

.box{ 
    display: block; 
    margin: 0px; 
    width: 248px; 
    height: 250px; 
    background: red; 
    padding: 0; 
    float: left; 
}

顯示：直列塊創建餘量。或者您可以嘗試 .wrapper {font-size：0;} 。box {display：inline-block;}

來源

2017-01-25 12:27:46

如何刪除div元素之間的餘量

回答

相關問題