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

Question

我很确定有人已经问过这个问题，但我在 Google 或这里找不到它。我只是想知道 CSS 对此的限制。

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

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

谢谢！

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>

Answer 2

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

框阴影超出了对象的填充。默认情况下 "Shadow" 是框的确切大小，然后您可以将其移动 left/right、up/down.

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

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

这仅在您需要一侧有边框时才有用，例如您正在使用 bootstrap 并且您希望文本位于 bootstrap 的 'top'列但想用颜色包裹它，您可以使用框阴影在顶部扩展背景颜色。

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

Is it possible to add border outside the margin using CSS?

css

border

margin