我很确定有人已经问过这个问题,但我无法在Google或SO上找到它.我只是对这个CSS的局限性感到好奇.
是否可以使用CSS在边距外添加元素的边框？基本上我希望边框放在边距之外而不是填充之外.
我理解盒子模型在CSS中是如何工作的,因此我认为不可能做我要求的事情,但是,有没有人发现任何黑客可以解决这个问题？
谢谢！
最佳答案
您将无法仅使用元素的框来执行此操作,因为框由其边框边缘而非边缘边缘定义,并且在元素的边缘边缘之外具有边框会干扰边距折叠.
您可以通过创建具有所需边框的伪元素来作弊,但是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;
}此外,由于边缘崩溃,一旦你有多个这样的元素,这就会完全分开 – 除了手动调整特定元素的特定边距以补偿之外,没有办法解决这个问题：
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;
}