Question

我很确定有人已经问过这个问题，但我无法在Google或SO上找到它。我在这里只是对CSS的局限性感到好奇。

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

我理解盒子模型在CSS中是如何工作的，因此我不认为可以做我要问的事情，但是，有没有人发现任何黑客可以解决这个问题？

谢谢！

Answer 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>

Answer 2

我会注意到你可以实现一个使用Box-Shadows的小黑客。

框阴影延伸到对象的填充之外。默认情况下，“阴影”是框的确切大小，然后您可以向左/向右，向上/向下移动。

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

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

这只有在你需要一面有边框的情况下才有用，就像你使用bootstrap一样，你希望文本位于bootstrap列的“顶部”但想要用颜色包住它，你可以使用框阴影将背景颜色扩展到顶部。

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

2 个答案: