如何擺脫div元素中svg下方的多余空間

Question

這是問題的說明（在 Firefox 和 Chrome 中測試）：

 <div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>

在 JSFiddle 上查看

請注意div中藍色svg下方的額外red空間。

已經嘗試將兩個元素的padding和margin設置為0 ，但沒有成功。

Answer 1

你需要display: block; 在你的svg 。

<svg style="display: block;"></svg>

這是因為行內塊元素（如<svg>和<img> ）位於文​​本基線上。 您看到的額外空間是用於容納字符降序的空間（'y'、'g' 等的尾部）。

如果您需要保持inline或inline-block您也可以使用vertical-align:top

Answer 2

svg是一個inline元素。 inline元素留下空白。

解決方案：

將display:block添加到svg ，或使父 div 的高度與svg相同。

演示在這里。

Answer 3

另一種選擇是將font-size: 0添加到 svg parent。

Answer 4

將 svg 的display屬性更改為block 。

Answer 5

嘗試將height:100px添加到div並在svg上使用height="100%" ：

<div style="background-color:red;height:100px">
    <svg height="100%" width="100" style="background-color:blue;"></svg>
</div>

Answer 6

只需將高度添加到主 div 元素

<div style="background-color: red;height:100px"><svg height="100px" width="100" style="background-color: blue;"></svg></div>

Answer 7

改變你的風格

樣式=“背景顏色：紅色；行高：0；”

Answer 8

如果您在 SVG 上設置高度，並且希望<a>標簽環繞您的 SVG：

• 添加height: fit-content; 到<a>
• 添加display: block; 到 SVG

Answer 9

display: flex也可以。 添加display: flex; 在div元素中。

 <div style="background-color: red; display: flex; "><svg height="100px" width="100" style="background-color: blue;"></svg></div>

Answer 10

這是問題的說明（已在Firefox和Chrome中測試）：

 <div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>

在JSFiddle上查看

請注意div內藍色svg下方的額外red空間。

已經嘗試將兩個元素的padding和margin設置為0 ，但是沒有運氣。