Question

有人可以向我解释为什么第一个div和第二个div之间有额外的3px空间：

<body style="margin: 0">
    <div style="background-color: green;">
        <svg style="background-color: red; margin: 0; padding: 0;" width="600" height="40" fill="#f00"></svg>
    </div>
    <div style="background-color: blue; width: 600px; height: 40px;"></div>
</body>

如果你将height: 40px;放在第一个div上，可以修复它，但我不明白为什么需要这样做。这种情况在Chrome，FireFox和IE中普遍存在。

Answer 1

SVG是内联元素，内联元素的默认垂直对齐是基线。

svg {
    vertical-align: middle; /* or anything other than baseline */
}

SVG额外保证金

1 个答案: