<分区>
<分区>
我有以下代码:
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 之间有一些间隙.
为什么会这样？
最佳答案
那是因为您正在为您的 SVG 元素使用 inline-block。虽然它保留了一些 block 级样式的可能性(例如显式声明垂直尺寸、填充和边距的能力)，但它也显示了一些内联元素行为，例如与基线对齐。。 p>
如果您查看您的代码片段，您会发现内联 block SVG 的底部与其旁边的按钮文本的基线齐平。所有 inline 和 inline-block 元素下方的额外空间是为字形上的下行保留的空间，例如 g、p、`q 等字符的悬挂部分。
关于html - 关于 svg 的流模型的疑问，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43366104/