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

Question

我相信有人已经问过这个问题了，但是我在谷歌和这里都找不到答案。我只是因为好奇而询问CSS的限制。

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

我理解CSS中盒子模型的工作原理，因此我认为不可能做到我所要求的。然而，有人发现了绕过这个问题的任何技巧吗？

谢谢！

- Obed Parlapiano

---

如果您与我们分享您的代码，我们可能能够帮助您。 - Mohammad Usman

谢谢大家。我只是对CSS的限制感到好奇，大多数情况下不必在边缘外使用边框，但如果需要呢？ - Obed Parlapiano

使用伪元素？像:before一样，在边距留下的空间上构建一个框？ - Obed Parlapiano

我会选择伪元素的解决方案，但另一种选择是使用边框而不是外边距，例如：https://jsfiddle.net/255jqv7v/（此示例使用红色边框进行演示，但将其更改为透明）。 - ca8msm

你总是会遇到边距折叠问题 - 这就是为什么你不应该将边框放在边距之外的原因。 - Pete

Answer 1

仅使用元素的框是无法实现此操作的，因为框是由其边界而非外边距边界定义的。在一个元素的外边距边界上设置边框会干扰边距折叠。

您可以通过创建带有所需边框的伪元素来作弊，但在我看来，这样做比它值得的麻烦多了。元素本身需要具有等于您期望的外边距加上所需边框宽度的边距值，伪元素需要使用该和作为其包含块相对于元素的绝对定位，并延伸出框这个和（假设您不希望边框侵入边距）：

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>

- BoltClock

---

很好的解释！基本上这个解决方案是最脏的...谢谢 :) - Obed Parlapiano

Answer 2

我需要提醒的是，你可以使用 Box-Shadows 实现一个小技巧。

Box-Shadows 可以超出对象的填充范围，“Shadow” 默认与框的大小相同，然后您可以左/右，上/下移动它。

例如，我可以使用以下样式：box-shadow : 0 -15px 0 #f7f7f7

这将给我一个“顶部15像素边框”。

但仅当您需要使一侧有边框时才有用。比如，如果您正在使用 Bootstrap 并且希望文本位于 bootstrap 列的“顶部”，但希望将其包裹在颜色中，则可以使用 Box-Shadows 在顶部延伸背景颜色。

- Trevor F

---

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

当添加内边框时，您会在 div 内部得到一个边框，但不会减少项目可用的空间，这正是我想要的。 - maracuja-juice

这会创建一个吞噬边距的边框，但它根本不会在边距外创建边框，这就是OP所问的。我有什么遗漏吗？ - Kal