css - 按钮内的 Svg 高度与文本不同

Question

如何解决？

Sandbox .

html {
  font-size: 18px; //user-defined
}

.s1 {
  height: 1rem;
}

.b1 {
  padding: 10px;
}

---

import * as React from "react";
import "./styles.css";

const MenuSvg = () => {
  return (
    <svg
      viewBox="0 0 24 24"
      strokeWidth="2"
      stroke="black"
      strokeLinecap="round"
      strokeLinejoin="round"
      className="s1"
    >
      <line x1="3" y1="12" x2="21" y2="12"></line>
      <line x1="3" y1="6" x2="21" y2="6"></line>
      <line x1="3" y1="18" x2="21" y2="18"></line>
    </svg>
  );
};

export default function App() {
  return (
    <div>
      <button className="b1">Hello</button>
      <button className="b1">
        <MenuSvg />
      </button>
    </div>
  );
}

Answer 1

将 display:block 添加到 SVG 以删除其下方的空间，并使用 line-height 定义第一个按钮的高度。请注意，按钮元素具有浏览器应用的默认字体大小，因此您可能需要覆盖它:

html {
  font-size: 18px;
}

.s1 {
  height: 1rem;
  display:block;
}

.b1 {
  padding: 10px;
  line-height: 1rem;
  font-size:1rem;
  vertical-align:top; /* to fix the alignment */
}

<div id="root">
  <div><button class="b1">Hello</button><button class="b1"><svg viewBox="0 0 24 24" stroke-width="2" stroke="black" stroke-linecap="round" stroke-linejoin="round" class="s1"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button></div>
</div>