刪除div之間的空白

Question

我在兩個 div 之間出現了一些奇怪的空白。

每個 div 都有 css 屬性display: inline-block並且每個 div 都有一個設置的高度和寬度。

我找不到空格在哪里。

這是一個小提琴

Answer 1

你在那里得到空白是因為你在 div 之間有空白。 內聯元素之間的空白被解釋為空格。

你有：

<div id="left_side">
    <div id="plan">
        <h1>div 1</h1>
    </div>
</div>
<div id="right_side">
    <div id="news">
        <h1>div 2</h1>
    </div>
</div>

為。。改變：

<div id="left_side">
    <div id="plan">
        <h1>div 1</h1>
    </div>
</div><div id="right_side">
    <div id="news">
        <h1>div 2</h1>
    </div>
</div>

但是，這是做您想做的事情的糟糕方法。

如果那是你想要做的，你應該浮動元素。

Answer 2

用：

float:left;
clear:none;  

在兩個div

Answer 3

如果您想保留您的編碼布局，請避免浮動並將每個 div 完全保留在自己的行上...

<div id="leftSide">Some content here</div><!-- --><div id="rightSide">Some more content here</div>

Answer 4

僅將此添加到您的 CSS

h1 {
    padding:0;
    margin:0;
   }

div 之間的空間只是由於 h1 Margin 和 Padding

Answer 5

這是訣竅：

<div id="left_side">
    ...
</div><div id="right_side">
    ...
</div>

請注意右側 div 如何在左側 div 的結束標記之后立即開始。 這是有效的，因為元素之間的任何空間，因為它們現在是內聯的，將成為布局本身的空間。 您可以使用兩個跨度元素來反映此行為。

演示。

Answer 6

您還可以添加display: flex; 到 div 的父容器（在本例中為body ）。 小提琴。

Answer 7

最好的方法是將父元素的字體大小設置為 0，然后將正常字體大小設置為該父元素內的子元素（否則從父元素繼承零）

Answer 8

將兩個元素都向左浮動，同時將 30% 的寬度變成 40% 以填充所有空間，但這不是必需的。 請注意，IE7 不支持“inline-block”，但可以通過一種變通方法進行修復。

http://jsfiddle.net/RVAQp/3/

Answer 9

將這些語句移到同一行：

</div><div id="right_side">

Answer 10

嘗試使用 float 而不是“inline-block”，沒問題。 剛剛將 display:inline-block 更改為：

#left_side {float: left;}

和

#right_side {float: right; margin-right: 10%}

沒有明顯的問題。 可能是錯的。

Answer 11

不知道為什么，但我通過添加border: 1px solid red;解決了這個問題border: 1px solid red; （垂直）和float: left; （水平）到相關的 DIV 樣式聲明和空格被刪除。

Answer 12

父 div 設置為 font-size: 0px 和 childs 設置為想要的大小，如 17px :)