儘管邊距和填充爲零，但爲什麼我的DIV之間會有間距？

-1

我無法解釋我的DIV的間距。你可以嗎？！它看起來像exactly like this。儘管邊距和填充爲零，但爲什麼我的DIV之間會有間距？

<div id="bottom"> 
    <div class="shortInfo wide">Lorem.</div> 
    <div class="shortInfo narrow">Ipsum.</div> 
    <div class="shortInfo narrow">Dolor.</div> 
</div> 

    #bottom div { 
    background-color: #ee82ee; 
    margin: 10px; 
    padding: 10px; 
    } 
    #bottom .wide { 
    width: 358px; 
    } 
    #bottom .narrow { 
    width: 200px; 
    } 
    #bottom .shortInfo { 
    background-repeat: no-repeat; 
    padding-left: 10px; 
    display: inline-block; 
    }

來源

2014-06-05 Konrad Viltersten

在你的小提琴中http://jsfiddle.net/Chamster/cE8BG/1/'#bottom div'有'margin：10px;'，除了刪除之外，你所需要做的就是擺脫白色空間'，就像這樣http://jsfiddle.net/cE8BG/6/ – Arbel

@Arbel我發佈了帶**邊緣的小提琴**，但在問題中我放入了**不是**的問題。儘管設置了0px，我仍能獲得空間**。另外 - downvoters：照顧精心製作？ –

可能因爲目前還不清楚。基於評論和評論投票，發佈的問題與jsfiddle之間存在脫節。重現問題的最小代碼應該包含在問題本身中。 – jmoerdyk

演示：http://jsfiddle.net/cE8BG/6

所有你需要做的就是擺脫white space，一種方法是在元素之間的標記，以實際刪除空格。

...</div 
    ><div...

（注意，其中第一div的結束>是）

另一個CSS唯一途徑（不需要標記改變）是將font-size設置爲0容器元素，然後恢復font-size對孩子們。

演示http://jsfiddle.net/cE8BG/7/

來源

2014-06-05 21:38:03 Arbel

哦，夥計......但是，在Visual Studio中搞砸了我超級漂亮的標籤佈局......難道沒有另一種方式？！ :(根據[本網站]（http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing）這是可能的，但我不明白這一點在CS中認可... –

@KonradViltersten是的，還有另外一種方法，請參閱更新後的CSS唯一答案 – Arbel

+1，以獲得完整性，或許您應該添加* white-space-collapsing *主題。 –

這是一個dublicate但。內嵌塊渲染存在問題。他們傾向於將代碼中的空間渲染爲真實的空間。解決這個問題的一個方法是，你可以將font-size：0應用到父div和font-size：12-13 ......無論你想要孩子divs！它只是一個快速入侵。關於內嵌塊元素的空間有很多討論！

來源

2014-06-06 00:02:29

儘管邊距和填充爲零，但爲什麼我的DIV之間會有間距？

回答

相關問題