CSS[box-sizing: border-box]がpddingのみの指定だと効かない

Question

普段はデザイナーをしている者です。

ボーダーを要素の内側に入れたいので、[box-sizing: border-box]を記述しましたが、widthとheightが指定されてないと、boarderが内側になってくれません。

デザインツールはFigmaを使用しており、figmaのデフォルトのboarderは、要素の内側（Inside）に設定されています。
なので、実装するとboarder分、サイズが大きくなってしまいます。

社内のエンジニアの方に、Figmaのデータを調整してほしいと相談されましたが、マージンなど影響範囲が大きいので、コーディングで解決する術はないか、質問した次第です。
（エンジニアの方も色々調べてくださったのですが、解決できず、、、）

関係するかわかりませんが、tailwindを使用して実装しています。

box-sizing以外で方法があったらそれでも、構いません。
よろしくお願いいたします！

<p class="label">テキスト</p>

*,
*:before,
*:after {
  box-sizing: border-box; 
}

.label {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  display: inline-block;
  padding: 16px 32px;
  text-align: center;
  vertical-align: middle;
  border-radius: 8px;
  border: 4px solid #000;
}

Answer 1

多分、box-shadowを使うのが一番スマートじゃないかなと思います。

box-shadow: 0 0 0 4px #000 inset;

他の表現方法としては、以下もありますが、
1については数値をいちいち計算しないといけないし2についてもコードが長くなるので。

1. border分paddingを減らす
2. 擬似要素とpositionで内側にborderを作る

参考

Comments

[shiosu]

なるほどーーー！！目からウロコです！！
早速、チームに共有させていただきます。

3案も考えていただき、ありがとうございました！