是否可以使用CSS在页边距外添加边框？ [英] Is it possible to add border outside the margin using CSS?

问题描述

我非常肯定已经有人问过这个问题，但我在Google上或这里都找不到。我只是好奇CSS在这方面的局限性。

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

我了解框模型在CSS中的工作方式，因此我认为不可能做我要求的事情。但是，有没有人发现可以绕过这一点的黑客呢？

谢谢！

推荐答案

您无法仅使用元素的方框执行此操作，因为方框是由其边框边缘定义的，而不是由其边距边缘定义的，并且将边框放在元素的边距边缘之外会影响边距折叠。

您可以通过使用您想要的边框创建一个伪元素来欺骗，但是如果这样做会带来更多的麻烦。元素本身的边距值需要等于您的预期边距金额加上您需要的边框宽度，并且伪元素需要以元素作为其包含挡路的绝对位置，并按此和扩展到框外(假设您不希望边框侵蚀边距)：

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>

这篇关于是否可以使用CSS在页边距外添加边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！