0

ここで1番目のdivと2番目の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 に答える