html - box-sizing プロパティを使用して 2 つのインライン ブロック要素の幅を 50% にする

Question

20px のパディングを持つ親 div があります。この div 内には、2 つの span タグがあります。幅を親 div の 50% にして、同じ行に収めたいと思います。box-sizing: border-box問題を解決していないようでした。

HTML

<div>
  <span>foo</span>
  <span>bar</span>
</div>

CSS

div {
  border: 1px solid black;
  box-sizing: border-box;
  padding: 20px;
  width: 150px;
}

div span {
  box-sizing: border-box;
  border: 1px solid green;
  display: inline-block;
  width: 50%;
}

アップデート：

このユースケースには必要ではなかったようbox-sizingで、CBroe の回答はそれに応じて問題を解決します。

Answer 1

これを行う方法は 100 通りあります (誇張かもしれませんが、少なくとも 4 通り考えられます)。

最も簡単な方法は、それらをblock要素にすることです（わかりやすくするために境界線を追加しました）：

* { box-sizing: border-box; }
span { display: block; width: 50%; float: left; padding: 12px; text-transform: uppercase; border: 4px solid #000; background: #f00;}
div { border: 2px solid #0f0; overflow:hidden;}

<div>
  <span>first span</span>
  <span>second span</span>
</div>