为什么减小按钮的字体大小不会影响父级 div 的高度？

Question

看似简单的问题，却找不到答案。我的代码在下面的链接中。当设置按钮的字体大小时 - 它会按预期减小字体大小，但父 div 不会缩小到按钮的高度。所以父 div 的边框与其子按钮之间存在间隙。为什么会发生这种情况，可以采取什么措施来解决它？

我尝试减少按钮的边距和填充，认为应用了一些默认样式，但没有一个起作用。

https://codesandbox.io/s/blazing-breeze-gztjxd?file=/src/App.js

    export default function App() {
      return (
        <>
          <div style={{ border: "10px solid green", padding: "10px" }}>
            <div style={{ border: "1px solid red", display: 'flex' }}>
              <button style={{ border: "1px solid green", padding: "0px" }}>
                <div style={{ "font-size": "5px" }}>My Text</div>
              </button>
            </div>
          </div>
        </>
      );
    }
    ````

Answer 1

您可以设置 div: "display: inline" 或 "display:inline-block" 使其缩小到内容。

import "./styles.css";

export default function App() {
  return (
    <>
      <div style={{ border: "10px solid green", padding: "10px" }}>
        <div style={{ border: "1px solid red", display: 'inline-block' }}>
          <button style={{ border: "1px solid green", padding: "0px" }}>
            <div style={{ "font-size": "5px" }}>My Text</div>
          </button>
        </div>
      </div>
    </>
  );
}