问题标签 [box-sizing]

我试图了解box-sizing: border-box下面的代码是如何工作的。当设置了高度或宽度（无填充）时，它会按预期工作（边框出现在 div 内）。但是如果你只使用 padding 来创建 div 的维度，它是行不通的。有人可以解释为什么吗？这是演示：

https://codepen.io/anon/pen/bxaBER

我的印象是，如果一个元素的高度和宽度设置为 0，如果 box-sizing 也设置为边框框，则填充不会推动宽度/高度，事实是，这似乎是这种情况，但只要我添加一个 1px 实心边框，就会应用填充。

勾选输入上的边框底部开/关并观察填充被应用/未应用

我要疯了还是这应该发生？我的意思是，我个人认为它会反过来，填充启用边框。

如果有帮助，Chrome 68 Win10。

我想实现以下设计，其中 Header div 具有 class named header， Footer div 具有 class namedfooter和 Left lateral div 具有 class namedlinks固定到那里的位置。

命名的右侧 divlink-contents是页面中唯一的scrollable部分。

我能够实现 Fixed Divs 但存在一些问题：

1. 当window size更改footer& linksdiv 时，它们会相互折叠。我希望他们适应变化，比如字体大小必须减小以包裹所有单词等。

2. 我不明白为什么header是固定的？您可以尝试Add more products多次单击按钮添加产品​​，以使submit按钮超出视图端口并出现滚动条。在滚动时，您会看到headerdiv 是固定的。 因为我没用过position:fixed。

但如果我使用它。它改变了我页面的整个结构。

代码片段（请在查看结果之前展开片段）：

我有一个简单的问题，希望有一个简单的答案。这似乎很基本，但我就是无法理解它。

所以，我在一个容器中安排了四个盒子：

我已经申请box-sizing: border-box;了 div，但由于某种原因padding根本没有效果。如果我使用margin，那么它会使 div 对于包装器来说太大，并且它们会移动位置。

我在这里想念什么？

提前致谢

杰米

预期的结果是框缩小并适合页面的中心，而不会离开页面的侧面。但是，实际结果是当我缩小到某些尺寸时它会离开页面的一侧。我真的不想添加另一个屏幕尺寸，因为我觉得我已经拥有的应该足够了。谁能帮忙解决这个问题，谢谢。

我制作了一个有两行九列的表格。第一行，我将单元格组合成三列。我已经在表格的每个单元格上设置了完整的图像宽度。第一行有三张图片，这里有些奇怪。第一个图像高度尺寸总是小于其他的。在我的情况下，第一个图像高度：214.84px 第二个和第三个：216.56px

我认为图像大小受box-sizing: border-box风格影响。我不知道为什么。你知道为什么会这样吗？您是否知道如何使这些图像具有相同的高度而没有特定的高度或背景

下面的代码：

代码笔

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

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

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

注意：由于我一直在尝试从 wordpress 环境突出主题中提取代码，因此我还无法以最简单的形式重现该问题，我最终可能会回答自己的问题，但请注意，我感谢任何反馈一路走来，我希望这个问题能为社区提供信息。

到目前为止，我的问题描述如下：

我正在尝试更好地控制我的内容在屏幕上的显示方式，并且似乎有一些我对 CSS 不了解的地方。我尝试使用“box-sizing:border box”属性，该属性在元素总宽度的计算中包括填充和边框。我添加了链接以显示输入和跨度元素的状态

“Chrome Devtool”输入元素突出显示

《Chrome Devtool》Span元素内容区

我认为 box-sizing 不起作用，因为该问题是与保证金相关的问题。我最好的猜测是“margin-left”属性影响了整个内容区域，将内容推到了 span 元素之外。但是我希望输入元素包含在 span 元素中

感谢 Lucien Dubois 添加 HTML 和 CSS

我尝试h2使用伪元素为元素创建边框底部半径。但是当我应用填充时，没有反映边框底部半径的左上角和右上角。但如果我应用保证金，它就会被反映。我不明白为什么会这样

我有一个带有 box-sizing:border-box 的表格单元格，这意味着当我指定 width:100px 时，它包括任何边框。我有一个设置宽度为 16px 和边框的单元格。尽管如此，该元素仍呈现为 26px 宽。 https://i.gyazo.com/e35d849169ecfa59ba2f548e28033c52.png

我错过/忽略了什么？