CSS使用顯示問題：內嵌塊

我已經設置了4個div的所有寬度：120px放置在240px寬的包裝內。CSS使用顯示問題：內嵌塊

的jsfiddle這裏 - http://jsfiddle.net/s7dxxro0/1/

HTML：

<div id="wrapper"> 
    <div class="primary-content-block" id="about"> 
    </div> 
    <div class="primary-content-block" id="gallery"> 
    </div> 
    <div class="primary-content-block" id="contact"> 
    </div> 
    <div class="primary-content-block" id="news"> 
    </div> 
</div>

CSS：

#wrapper { 
margin:0 auto; 
width: 240px; 
} 

.primary-content-block { 
display:inline-block; 
vertical-align:top; 
width: 120px; 
height: 120px; 
} 

#about { 
background: radial-gradient(#5cc4ba, #00aa99); 
} 

#gallery { 
background: radial-gradient(#5cc4ba, #00aa99); 
} 

#contact { 
background: radial-gradient(#5cc4ba, #00aa99); 
} 

#news { 
background: radial-gradient(#5cc4ba, #00aa99); 
}

然而，要素彼此相鄰不顯示由於微弱的差距被應用到我的4塊。

這似乎是一個保證金來自哪裏？我如何刪除它？

這工作時，我使用float：留在原地顯示：inline-block的，但我寧願不使用浮動的原因有很多

來源

2014-09-12 ocajian

添加浮動：左;並增加容器的寬度，如果它不夠寬 – davidcondrey 2014-09-12 09:58:36

你的代碼工作在這裏檢查'http：// jsfiddle.net/s7dxxro0/4 /' – Amit 2014-09-12 09:59:05

你可以嘗試[this]（http://jsfiddle.net/s7dxxro0/3 /），因爲換行符會在您的方框之間添加空格。 – Paul 2014-09-12 09:59:11

這是因爲您的內聯塊之間有空格。元素之間用空格分開（不幸的是，新行也會計算在內），所以瀏覽器在它們之間放置一個空格，就好像它們是單詞一樣。

有幾種方法可以解決這個問題。

把html標籤一邊到另一邊：

<div class="primary-content-block" id="about"> 
</div><div class="primary-content-block" id="gallery"> 
</div><div class="primary-content-block" id="contact">

使用了div陰性切緣：

.primary-content-block { 
    margin-right: -4px; 
}

將字體大小設置爲0：

#wrapper { 
    font-size: 0; 
} 
#wrapper > div { 
    font-size: 12px /* or whatever it was before */ 
}

還是在<p>元素的情況（不是divs，不幸）只是省略了結束標記：

<p class="primary-content-block" id="about"> 
<p class="primary-content-block" id="gallery">

來源：css-tricks

來源

2014-09-12 10:04:41 isogram

我認爲負邊際是一個不好的解決方案，因爲你無法知道這個空間是完全正確的4PX。其他的解決方案都很好，所有這些解決方案都可以工作。 – GolezTrol 2014-09-12 10:07:49

@GolezTrol - 你通常在上下文中知道你需要什麼負值。它並不總是4px，但這是一種罕見的情況，px或em中的正確負邊界不能被選擇。 – Alohci 2014-09-12 10:13:06

我同意Golez，這不是一個完美的解決方案，但我想完成。我不喜歡font-size方法，因爲它會中斷'em'繼承。 – isogram 2014-09-12 10:22:34

這件事是通過換行我的div

到修復之間引起將是：

<div id="wrapper"> 
    <div class="primary-content-block" id="about"></div><div class="primary-content-block" id="gallery"></div><div class="primary-content-block" id="contact"></div><div class="primary-content-block" id="news"></div> 
</div>

來源

2014-09-12 10:02:37 ocajian

你可以簡單的附加浮動：左股利

.primary-content-block { 
    /* display:inline-block; */ 
    vertical-align:top; 
    width: 120px; 
    height: 120px; 
    float: left; 
}

這樣http://jsfiddle.net/s7dxxro0/10/

來源

2014-09-12 10:05:14 Muhammed

這不是一個「錯誤」（我不認爲）。它只是設置線條上的元素的方式。這些塊之間的空間就像單詞之間的空格。可以快速移動的元素回到與餘量的負4像素位置（可能需要基於母體的字體大小進行調整）

.primary-content-block { 
    display:inline-block; 
    vertical-align:top; 
    width: 120px; 
    height: 120px; 
}

來源

2014-09-12 10:05:22 Danis

CSS使用顯示問題：內嵌塊

回答

相關問題