0

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

http://jsbin.com/aSoRoC/1/edit

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

如果您放置第一个 div，它可以修复height: 40px;，但我不明白为什么这是必要的。这在 Chrome、FireFox 和 IE 中普遍发生。

4

1 回答 1

5

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

svg {
    vertical-align: middle; /* or anything other than baseline */
}
于 2013-08-28T18:16:57.893 回答