质疑相对于SVG

我有以下代码：质疑相对于SVG

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 = 60像素。此外，.btn应该是在顶部而不是底部。 .btn另一个有趣的事情是，它有很多的空间，但在.btn和.div之间还有一段距离。

为什么会发生？

来源

2017-04-12 Anurag Kalia

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

如果你看看你的代码片段，你的内联块SVG的底部与它旁边的按钮文本的基线齐平。所有内联和内嵌块元素下面的额外空间是为字形上的下行保留的空间，如g,p，q等字符的悬挂部分。

来源

2017-04-12 09:53:56 Terry

质疑相对于SVG

回答

相关问题