按钮内嵌套<p>标签的字体大小问题及按钮尺寸不随字体变化疑问

问题1：字体大小异常 #

你的代码里<button>设置了font-size:10px，但内部<p>标签显式定义了font-size:16px，这会导致按钮内文字实际采用p标签的字号，和按钮本身的设置冲突，造成视觉上的“异常”。另外，浏览器默认对<p>标签带有上下外边距（margin），也会让文字排版显得不协调。

解决方法： #

• 移除<p>标签上的font-size属性，让它继承按钮的字号，或者统一两者的字号设置
• 重置<p>标签的默认外边距，消除多余间距：

  button p {
    margin: 0;
  }
  

问题2：按钮尺寸不随字体大小变化 #

<p>是块级元素（display:block），它的默认外边距会脱离按钮的内容盒计算，导致按钮的height:auto无法根据文字大小正确自适应。同时，块级元素的特性也会干扰按钮的宽度计算逻辑。

解决方法： #

1. 替换标签：把内部的<p>换成<span>，<span>是行内元素，不会破坏按钮的内部布局，能让按钮尺寸随文字正常变化
2. 修改p的display属性：如果必须保留<p>标签，将它的display改为inline-block或inline，同时清除默认外边距：

   <button style="font-size: 10px; color: white; font-weight: 500; width: auto; height: auto;" class="sc-fLcnxK dLvstt">
     <p style="font-weight: 500; color: #FFFFFF; display: inline-block; font-family: inherit; font-size: 16px; margin: 0;" class="sc-fnGiBr hMZmkR">Button</p>
   </button>
   

3. 统一控制字号：确保按钮和内部文字的字号设置一致，避免因字号差异导致的尺寸计算混乱

优化后的完整代码示例 #

<!-- 推荐方案：用span替换p -->
<button style="font-size: 16px; color: white; font-weight: 500; width: auto; height: auto;" class="sc-fLcnxK dLvstt">
  <span style="font-weight: 500; color: #FFFFFF; font-family: inherit;" class="sc-fnGiBr hMZmkR">Button</span>
</button>

内容的提问来源于stack exchange，提问作者AKStacks