如何让CSS边框纳入元素布局尺寸？类似Figma的stroke: included

方案一：让边框纳入元素总高度（推荐） #

直接给按钮设置box-sizing: border-box;，这会让元素的总宽高包含内边距（padding）和边框（border），而非默认的仅包含内容区域。

示例代码：

.button {
  box-sizing: border-box;
  padding: 18px 24px; /* 保留原本的padding值，无需调整 */
  border: 2px solid #000;
  /* 不用硬编码height，padding+内容+边框的总高度会维持预期的48px */
}

设置后，按钮总高度会严格保持48px，边框会从原本padding与内容的空间中分配位置，完全不用减少padding值。

方案二：让边框叠加在padding之上（不占用布局空间） #

如果希望边框直接覆盖在padding区域上方、不影响整体布局尺寸，可采用以下两种方式：

• 用outline替代border：outline是元素外围的线条，默认不占用布局空间，通过outline-offset设为负数可让线条向内偏移，刚好覆盖padding区域：

  .button {
    padding: 18px 24px;
    outline: 2px solid #000;
    outline-offset: -2px;
  }
  

• 用inset box-shadow模拟边框：内阴影不会增加元素尺寸，相当于在元素内部画出边框效果：

  .button {
    padding: 18px 24px;
    box-shadow: inset 0 0 0 2px #000;
  }
  

这两种方式都不会改变按钮总高度，边框直接叠加在padding之上，完全满足不调整padding的需求。

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