是否可以使用 CSS 在边距之外添加边框？

Posted 2023-03-06

【中文标题】是否可以使用 CSS 在边距之外添加边框？

【英文标题】：Is it possible to add border outside the margin using CSS?

【发布时间】：2017-03-16 22:36:15

【问题描述】：

我很确定已经有人问过这个问题，但我在 Google 或这里的任何地方都找不到。我只是对 CSS 在这方面的限制感到好奇。

是否可以使用 CSS 在边距之外添加元素的边框？基本上，我希望将边框放在边距之外，而不是在填充之外。

我了解盒子模型在 CSS 中的工作原理，因此我认为不可能按照我的要求进行操作。但是，有没有人发现任何黑客来解决这个问题？

谢谢！

【问题讨论】：

如果您与我们分享您的代码，我们可能会为您提供帮助。

使用伪元素

谢谢大家。我只是对 CSS 的局限性感到好奇，在大多数情况下，你不应该在边距之外使用边框，但如果你这样做了呢？

使用伪元素？像 :before 并在边距留下的空间上构建一个框？

我会选择伪元素的答案，但另一种方法是使用边框而不是边距，例如jsfiddle.net/255jqv7v（本例使用红色边框演示但改为透明）

【参考方案1】：

你不能只用元素的盒子来做到这一点，因为盒子是由它的边框边缘定义的，而不是它的边缘边缘，并且在元素的边缘边缘之外有边框会干扰边缘折叠。

您可以通过创建具有所需边框的伪元素来作弊，但在 IMO 中，这比它的价值更麻烦。元素本身的边距值需要等于你的预期边距量加上你想要的边框宽度，并且伪元素需要以元素作为其包含块的绝对定位，并延伸到这个总和的盒子（假设你不希望边框吃掉边距）：

html 
    background-color: #fff;


body 
    float: left;
    background-color: #ccc;


div 
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #ff0;
    margin: 30px;


div::before 
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    bottom: -30px;
    left: -30px;
    border: 5px solid #f00;

<div></div>

此外，一旦由于边距折叠而拥有多个这样的元素，这将完全崩溃——除了手动调整特定元素的特定边距以进行补偿之外，没有其他方法可以解决：

html 
    background-color: #fff;


body 
    float: left;
    background-color: #ccc;


div 
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #ff0;
    margin: 30px;


div::before 
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    bottom: -30px;
    left: -30px;
    border: 5px solid #f00;

<div></div>
<div></div>
<div></div>

【讨论】：

很好的解释！基本上这是一个解决方案可以去的肮脏...谢谢:)

【参考方案2】：

我会注意到，您可以使用 Box-Shadows 实现 1 个小技巧。

盒子阴影超出了对象的内边距。默认情况下，“阴影”是框的确切大小，然后您可以左/右、上/下移动。

例如，我可以有以下风格： box-shadow : 0 -15px 0 #f7f7f7

这会给我一个“15px 边框”到顶部

这仅在您需要一侧有边框时才有用，例如，如果您正在使用引导程序并且您希望文本位于引导程序列的“顶部”，但又想用颜色包裹它，您可以使用盒子阴影扩展顶部的背景颜色。

【讨论】：

我完美地使用了这种技术，在整个盒子周围创建了一个边框，就像 OP 要求的那样。 box-shadow: 0px 0px 0px 13px #000;

添加插图时，您在 div 内有一个边框，这不会减少我想要的项目的可用空间量。

这会创建一个吃掉 into 边距的边框，但它根本不会创建一个 outside 边距，这就是 OP在问。我在这里错过了什么吗？？