问题标签 [border-box]

我想为表格的单元格添加填充，但这会导致表格内的文本、输入等溢出。从其他 Stack Overflow 讨论中，我收集到答案是 set box-sizing: border-box，但这对我不起作用。

下面是一个最小的例子来说明这个问题。

填充为 1.5% 时，输入框伸出其单元格的右端。如果将 padding 更改为 0，则输入框非常适合。我想保留填充但使输入框适合。

我有这个 html 文本

如您所见，生成以下表单字段，对齐一行

我想通过将第二个向右移动，将它们与我的 html 页面的垂直轴对称地显示，如您所见

这样“引理 CH”框的左边距与“Acronimo IT”框之一对齐。如何更改我的代码才能获得第二张图片中显示的结果？

我有一个指定高度和宽度的 div 容器 [例如，宽度 = 280 像素和高度 = 30 像素]。div 包含一个带有 css 属性的文本框 [input type=text]： box-sizing=border-box & width=100% 我已经将两个 div 容器相邻放置，并且期望文本框之间应该有间距。

这在 Chrome 和 Mozilla 中运行良好。但是，Microsoft Edge 将文本框扩展到整个 div，并且相邻文本框之间没有空格。我怀疑，Edge 没有考虑盒子尺寸，因此使用了全宽？请指教。

我正在尝试使用 flexbox 创建具有特定装订线大小的基于列的布局。

例如，我想包括将类添加col-2到给定元素的选项，这将使该元素的大小与该行中其他元素的 2 个相同。col-3对于 3 个元素的大小，col-4对于 4 个等。

我通过更改添加类flex的元素的属性来做到这col-n一点。

SCSS 混合

HTML

如果我不使用任何填充，则此方法有效： 但是，如果我添加填充，则尽管我已对所有子元素 进行了设置，但填充的大小会附加到内容（就好像它是一个内容框一样） 。 我相信不适用于弹性物品。box-sizing: border-box;box-sizing: border-box;

我怎样才能简单地将填充包含在每个元素的大小中，就好像它们是boxer-box元素一样？

我想让我的元素动态地将其高度从初始更改为 0px，但由于填充，它似乎无法正常工作。我不能说我做错了什么。

我不想使用：显示：阻止或隐藏可见性。当高度为 0 时，我不想从样式中删除填充，因为它使这个逻辑过于复杂。我希望我在这里做一些愚蠢且容易修复的事情，这就是它不起作用的原因。有任何想法吗？

我正在添加它以获得更多上下文。它是反应。我已经简化了代码——但这是基本的想法。我想让这个模式调整大小。所以我有 ：

问题是，即使我在 web 开发人员工具中手动将高度设置为 0px，这个元素仍然存在，因为这个填充就像上面的屏幕截图一样。

目前正在学习编码，正在构建一个简单的石头剪刀布游戏。我已经box-sizing: border-box假设这会在添加填充时阻止盒子大小的增长。但是，当我添加填充时，我的盒子会变大，我不知道为什么？我只期望这个content-box。有人可以帮忙吗？谢谢你。下面的代码：

我需要为页面的大部分时间保留 box-sizing:border-box 但需要在页脚中删除它。以下不太有效

对于给定的示例，使用继承而不是直接值有什么区别或好处。

继承的例子

具有直接价值的例子

我想为 div 的宽度设置动画，从 0 开始。但是由于填充，div 永远不会小于我设置的填充。我尝试使用border-sizing: border-box;但它不起作用。

我在这里做错了什么？

这是我的笔。

我有一个输入元素，它的左侧和右侧都有 1em 的填充。但我已经应用了“box-sizing:border-box”。但是，它的宽度仍然大于其他元素。我认为这可能是因为我需要删除一些代码，但我不确定。输入元素绝对是一个问题，因为另一个元素正确居中对齐。下面是代码：

它有什么问题？