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

Question

我有一个简单的页面，它应该呈现一个宽度为 1220 像素的外部容器，其中包含两个内部部分，一个是 770 像素宽，一个是 330 像素宽。它们都有 20px 的边距，而 770px 的左右边距设置为 20px。

这让

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

使用浮动时，我可以将外部宽度设置为 1220 像素，将内部宽度设置为 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>

当使用 inline-block 时，我必须移除一些像素（确切地说是 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