为什么当浮动没有时，内联块会“窃取”4px

Question

我有一个简单的页面应该渲染一个1220px宽的外部容器，有两个内部部分，一个宽770px，宽330px。它们具有20px的边距，而770px的左右两侧的填充设置为20px。

这使得

• 20 + 20 + 770 + 20 + 20 + 20 + 330 + 20 = 1220
• 或... margin + padding + section + padding + margin + margin + section + margin

使用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>

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

感谢任何建议，谢谢！

Answer 1

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

更多详情here