我尝试在容器内垂直排列 SVG 和 div 元素,但在它们之间遇到意外的间距问题。我似乎无法弄清楚这个间距是从哪里来的。
这是我的 HTML 结构的简化版本:
<!doctype html>
<html>
<head>
<title>This is the title of the webpage!</title>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
</head>
<style>
*{
margin: 0;
top: 0;
}
</style>
<body>
<div style="width: 100vw; height: 100vh; text-align: center; margin-top: 2em;">
<div style="width: 600px; min-height: 20px; background: red; margin: auto;">
<svg viewBox="0 0 600 60" width="600px" height="60px" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
<path style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-width: 0px;" d="M 30 0 H 570 A 30 30 0 0 1 600 30 V 60 H 0 V 30 A 30 30 0 0 1 30 0 Z" />
</svg>
<div style="width: 100%; height: 60px; background: #d6d6d6;"></div>
</div>
</div>
</body>
</html>
如何消除两个元素之间的间距?
这是因为您的
<svg>
是一个内联元素(默认值),但在这种情况下您希望它是一个块元素。
如果将CSS
display: block;
应用到<svg>
,那么间隙就会消失。