負邊距右邊需要寬度+ 4像素？

我在使用display-style =「inline-block」時出現2列布局問題。我有這個網站：負邊距右邊需要寬度+ 4像素？

<div class="A">tekst</div> 
<div class="B">tekst</div>

與CSS：

.A { 
    background-color: blue; 
    height: 200px; 
    width: 250px; 
    padding-left: 25px; 
    margin-right: -254px; 
    display: inline-block; 
    vertical-align: top; 
    position: relative; 
    box-sizing: border-box; 
    z-index: 1; 
} 

.B { 
    background-color: red; 
    height: 400px; 
    width: 100%; 
    padding-left: 300px; 
    display: inline-block; 
    vertical-align: top; 
    position: relative; 
    box-sizing: border-box; 
}

http://jsfiddle.net/eaFn9/9/

但是你可以看到，第一個div的寬度爲250個像素，但它需要一個與容限在第二個div顯示爲「next」之前-254px的權利。

這是爲什麼？我想不明白。此外，大多數示例不使用框大小，但如果將其刪除，則佈局會再次出現錯誤。

我使用的是Chrome，但它在FF和Safari中似乎也一樣。

任何幫助，非常感謝！

問候，邁克爾

來源

2014-03-25 mjepson

http://css-tricks.com/fighting-the-space-between-inline-block-elements/ – fcalderan

似乎添加「body {font-size：0;}」爲大多數瀏覽器解決了它，但在Safari中導致問題變得更糟（爲了正常工作，它現在需要-255px的餘量 - 正確）。 – mjepson

'font-size：0'對於較老的歌曲也不起作用（它將使用其最小字體大小）。無論如何，法布里齊奧的回答是正確的，儘管我不會稱之爲「戰鬥」空間。你只需要刪除空間，就是這樣。 –

一些attemps後發現問題，我敢打賭，你有一些空白，甚至一些輸入2 div之間出現的按鍵。這個問題很難發現。因此，要解決這個問題，你只需要清除所有空白或輸入按鍵，使得2個div標籤必須靠近彼此相鄰：

<!-- place 2 divs close to each other without anything between. --> 
<div class="A">tekst</div><div class="B">tekst</div>

這裏是expectedly working fiddle

來源

2014-03-25 22:19:10

真的沒有太多的投注，因爲回報在OP的div之間清晰可見。 –

這似乎是解決方案，但我認爲這是奇怪的HTML認爲div之間的回報應該被解釋爲一個空間。無論如何，現在的問題是生成的HTML，我不能總是確保沒有空格或divs之間的任何東西。 – mjepson

所有空格（返回，換行符，製表符）都被解釋爲空格。這就是HTML的工作原理。不僅在元素之間，而且在元素內部的單詞之間。（將2個單詞放在一個html文件中，然後將它們顯示在線上，並在中間放置一個空格。） –

對於同一人問題：

似乎向父容器添加'font-size：0'會爲每個瀏覽器修復它，而不是針對Windows的Safari（所有其他Safaris按預期工作）。如果你想在它們中有文本，請確保你重置字體大小到一個合理的值在子div中（所以在我的例子中，div和A都有font-size：14px;例如顯示文本）。我認爲（我還沒有做過任何研究）這是Safari for Windows的一個bug，因爲它是唯一一個有這個問題的Safari。

來源

2014-04-01 09:01:01 mjepson

負邊距右邊需要寬度+ 4像素？

回答

相關問題