Question

我有以下代码：

body {              background-color: black; }
.root {             background-color: aqua; }
.svg-container {    background-color: lightgray; }
svg {               background-color: red; }
.btn {              background-color: yellow; }

.svg-container, .btn {
    display: inline-block;
}
svg {
    height: 60px;
    width: 60px;
}

svg, .svg-container, .btn {
    margin: 0;
    padding: 0;
    border: 0;
}

<html>
<head></head>
<body>
    <div class="root">
        <div class="svg-container">
            <svg></svg>
        </div>
        <button class="btn">Button</button>
    </div>
</body>

</html>

我预计.svg-container的高度恰好等于包含svg = 60px。此外，.btn应位于顶部而不是底部。 .btn的另一个有趣的事情是，它上面有很多空间，但.btn和包含.div之间存在一些差距。

为什么会这样？

Answer 1

这是因为您使用inline-block作为SVG元素。虽然它保留了一些块级样式可能性（例如显式声明垂直尺寸，填充和边距的能力），但它也显示了一些内联元素行为，例如与基线对齐。

如果查看代码片段，内联块SVG的底部将与其旁边的按钮文本的基线齐平。所有内联和内联块元素下方的附加空间是为字形上的下行保留的空间，如g，p，`q等字符的悬空部分。

关于svg的流动模型的怀疑

1 个答案: