爲什麼inline-block「steal」4px浮點數不是的時候

我有一個簡單的頁面，它應該渲染一個1220px寬的外部容器，兩個內部部分，一個寬770px，一個寬330px。他們有20px的邊距，770px的左右邊距填充值設置爲20px。爲什麼inline-block「steal」4px浮點數不是的時候

這使得

20 + 20 + 770 + 20 + 20 + 20 + 330 + 20 = 1220
或...餘量+填充+ +部分填充+餘量餘量+ + +部分保證金

當使用浮動我可以有外部寬度設置爲1220px和內部寬度設置爲770和330使用邊距和填充餘下。這呈現正確，但我不希望浮游物！

<div style="width: 1220px; background-color:#ffe4c4;"> 
    <section style="width: 770px; float: left; padding: 0 20px; margin: 20px; background-color: #ccc;"> 
     <!-- content goes here --> 
     @RenderBody() 
    </section> 

    <section style="width: 330px; float: left; margin: 20px; background-color: #d8bfd8; padding: 0"> 
      <img src="/media/1155/menu_fake.jpg" width="330" /> 
    </section> 
</div>

當使用內聯塊時，我必須刪除一些像素（準確的說是4px），以使元素相鄰顯示。

<div style="width: 1220px; background-color:#ffe4c4;"> 
    <section style="width: 766px; vertical-align:top; padding: 0 20px; margin: 20px; background-color: #ccc;"> 
     <!-- content goes here --> 
     @RenderBody() 
    </section> 

    <section style="width: 330px; display: inline-block; vertical-align:top; margin: 20px; background-color: #d8bfd8; padding: 0"> 
      <img src="/media/1155/menu_fake.jpg" width="330" /> 
    </section> 
</div>

任何意見表示讚賞，謝謝！

來源

2013-05-03 Eric Herlitz

閱讀本http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ – 2013-05-03 09:56:29

inline-block元素還呈現源中元素之間的空白區域。要消除它們，您需要刪除代碼中的空格。

更多細節here

來源

2013-05-03 09:54:39

爲什麼inline-block「steal」4px浮點數不是的時候

回答

相關問題