Flexbox子元素padding异常：右侧按钮内边距不足问题排查

从代码和描述来看，两个按钮的px-4 py-3内边距设置完全一致，视觉上右侧按钮显得内边距不足，核心原因是文字长度差异+grid均分列宽导致的：

• grid-cols-2会让两列宽度完全相等，而"Telefon"比"E-Mail"文字更长，占用了更多列宽空间，按钮的可用内边距区域被压缩，所以视觉上看起来内边距更小。

解决方法 #

方法1：让列宽随内容自适应 #

把grid-cols-2改成grid-cols-[auto_auto]，每列宽度会根据按钮内的文字长度自动调整，两个按钮的内边距就能保持视觉一致：

<div class="col-span-2 flex gap-0.5 items-center justify-between">
   <p>Wie möchten Sie ihre Antwort erhalten?</p>
   <div class="grid grid-cols-[auto_auto] gap-1.5">
      <div
         class="whitespace-nowrap rounded bg-black px-4 py-3 text-center leading-none text-white"
         >
         E-Mail
      </div>
      <div
         class="whitespace-nowrap rounded border px-4 py-3 text-center leading-none"
         >
         Telefon
      </div>
   </div>
</div>

方法2：给按钮设置最小宽度 #

给两个按钮统一添加min-w-[120px]（数值可按需调整），这样即使文字长度不同，按钮也有固定最小宽度，内边距的视觉效果会一致：

<div class="col-span-2 flex gap-0.5 items-center justify-between">
   <p>Wie möchten Sie ihre Antwort erhalten?</p>
   <div class="grid grid-cols-2 gap-1.5">
      <div
         class="whitespace-nowrap min-w-[120px] rounded bg-black px-4 py-3 text-center leading-none text-white"
         >
         E-Mail
      </div>
      <div
         class="whitespace-nowrap min-w-[120px] rounded border px-4 py-3 text-center leading-none"
         >
         Telefon
      </div>
   </div>
</div>

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