问题标签 [border-box]

我确定我在做一些明显的错误，但我无法弄清楚。我的灯箱大小是动态的（百分比宽度），我希望灯箱中的内容在较小的屏幕上根据需要垂直滚动，而不会移动内容周围的边框（实际上是一个盒子阴影）。

作为一个额外的警告，我需要“容器” div 具有动态高度。当我将容器 div 设置为 height: 100% 时，灯箱的功能就像我想要的那样（参见下面的代码），但是当我删除高度设置时，溢出不再正常工作。

这个我的灯箱演示应该有助于澄清我的问题：

http://viewer.zmags.com/publication/a82492b9?viewType=pubPreview

这是我的CSS：

还有我的 HTML：

试图在这张图片上达到类似的效果：http: //i.imgur.com/zTkMou8.jpg div 内边框的圆边。可以用CSS来做吗？div 假设是充满响应的，所以最好有一些边框效果，根据 div 的大小可以更小或更大。

我有一个填充为 20px 的父 div。在这个 div 里面有两个 span 标签。我希望它们的宽度为父 div 的 50% 并适合同一行。box-sizing: border-box似乎没有解决问题。

HTML

CSS

更新：

看起来box-sizing这个用例没有必要，CBroe 的回答相应地解决了这个问题。

我正在尝试将 box-sizing:border-box 应用于没有运气的伪元素 - 填充 - 效果所必需的 - 正在防止伪元素的最大宽度（或宽度）为 0 - 它始终为 0 + padding .

我要应用它的元素是一个<a>标签

我的css在元素上显式调用border-box：

这是一个小提琴：

https://jsfiddle.net/metahavies/od6ko01b/

谢谢！

代码：

HTML

CSS

JSFiddle：http:
//jsfiddle.net/5k0ddtdn/4/

考虑到这不是border-box.

为什么不这样做？

考虑这段代码

根据我读过、理解和使用过的所有内容，box-sizing: border-box;这应该什么都不显示，因为宽度和高度为零，而填充/边框在零宽度和高度之内。

然而，我们看到的是一个 26x26 的框（（12 填充 + 1 边框）*2）。是什么赋予了？为什么border-box不在这里工作？

我正在创建一个带有覆盖深色背景和标题文本的图像的画廊。位置没问题，但覆盖 div 超出了图像的范围，因为在容器元素上使用了填充。

我在几个地方读到了它，并了解到border-box可以解决这个问题，但事实并非如此。我在这里做错了吗？查看代码：

HTML：

CSS：

游乐场链接：代码笔

我在 Chrome 中的图像周围出现了一个奇怪的框。这里有一个例子：http: //ulrikhogrebe.com/projects/bbcme.html - 如果你在 chrome 中打开它，并查看标题图像下的第一张图像（黑色和白色），你会看到它周围有一个边框（如果您错过了，请缩放您的浏览器）。尝试边界：0；- 但似乎无法松开它。此外，它在 Firefox 中也很好。

有任何想法吗？

我在每个项目之间设置了 5px 的填充，但是 5px + 5px 在兄弟项目之间变为 10px（水平，垂直也有 10px）

http://plnkr.co/edit/7FKBiTocHrTuwnpEqQsu?p=preview

有什么方法可以在所有内容之间获得 5px 精确的填充或间距？

注意：我尝试过 + 运算符，但是对第六项有副作用，因为这 10 项是同级的

我有以下代码：

很抱歉风格不好，我刚刚开始学习 CSS ......

现在，在浏览器中看到它之后，我看到了一张狗的图片，旁边有一些文字。我想让这个文本在中心（垂直）对齐。基本上，目前它看起来像这样，我想把它设置成这样。我应该如何修改我的 CSS 代码以按原样显示？谢谢！

编辑我的另一个问题是 - 为什么文字没有排列在图片的顶层到顶层？我在我的 css 代码中没有看到任何限制，有人知道它是如何工作的吗？