Html 使用“框大小”属性为两个内联块元素提供50%的宽度

我有一个填充为20px的父div。在这个div中有两个span标记。我希望它们的宽度是父div的50%，并且适合于同一行<代码>框大小：边框框似乎无法解决此问题

HTML

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

更新：

---

这个用例似乎不需要调整盒子大小，CBroe的答案相应地解决了这个问题。

有100种方法可以做到这一点（可能有些夸张，但我至少可以想到4种）

最简单的方法是使它们

块
元素（为清晰起见添加边框）：


*{框大小：边框框；}
span{display:block；width:50%；float:left；padding:12px；文本转换：大写；边框：4px solid#000；背景：#f00；}
div{border:2px solid#0f0；溢出：hidden；}

第一跨
第二跨
有100种方法可以做到这一点（可能有些夸张，但我至少可以想到4种）

最简单的方法是使它们
块
元素（为清晰起见添加边框）：


*{框大小：边框框；}
span{display:block；width:50%；float:left；padding:12px；文本转换：大写；边框：4px solid#000；背景：#f00；}
div{border:2px solid#0f0；溢出：hidden；}

第一跨
第二跨
元素之间的空白是您的问题

内联块元素的布局与普通文本非常相似，因此根据通用HTML规则，一个元素的结束标记和下一个元素的开始标记之间的空白被压缩为一个空格字符–这使得50%+一个空格字符+50%最终略多于100%，因此，第二个元素变成了一条新的“线”

有几种方法可以尝试解决这个问题——从消除元素标记之间的空白，将这些元素“外部”的所有内容的字体大小设置为0……这里将更详细地讨论其中一些：
元素之间的空白是您的问题

内联块元素的布局与普通文本非常相似，因此根据通用HTML规则，一个元素的结束标记和下一个元素的开始标记之间的空白被压缩为一个空格字符–这使得50%+一个空格字符+50%最终略多于100%，因此，第二个元素变成了一条新的“线”

有几种方法可以尝试解决这个问题——从消除元素标记之间的空白，将这些元素“外部”的所有内容的字体大小设置为0……这里将更详细地讨论其中一些：
span{
display:block；float:left
}如果不使用浮动，就没有办法做到这一点？如果不想使用浮动，可以尝试将它们定位为绝对值，但浮动将是更好的解决方案。元素之间的空白是您的问题…您应该使用它
display:flex
在父对象上，而
width:50%
在子对象上。span{
display:block；float:left
}如果不想使用浮点数，则无法执行此操作？您可以尝试将其定位为绝对值，但是浮动是一个更好的解决方案。元素之间的空白是你的问题…你应该使用它<代码>显示：flex
在父项上，宽度：50%
在子项上。如果您确实不能使用float，这也可以。但我建议将此解决方案与float一起使用：left；如果您真的不能使用float，这也可以。但我建议将此解决方案与float一起使用：left；
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%;}