Css 为什么内联块；偷；浮动时为4px'；s不'；T

我有一个简单的页面，它应该呈现一个1220px宽的外部容器和两个内部部分，一个是770px宽，一个是330px宽。它们都有20px的边距，而770px的左右两侧都有20px的填充

这使得

• 20+20+770+20+20+20+330+20=1220
• 或者。。。边距+填充+部分+填充+边距+边距+部分+边距

使用float时，我可以使用边距和填充填充将外部宽度设置为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>

@RenderBody（）

当使用内联块时，我必须删除一些像素（精确地说是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>

@RenderBody（）

---

任何建议都将不胜感激，谢谢

内联块

元素还渲染源中元素之间的空白。要消除它们，您需要删除代码中的空白

---

更多详细信息

内联块

元素也会渲染源中元素之间的空白。要消除它们，您需要删除代码中的空白

更多详细信息

阅读此阅读此