我想知道,是否可以给 border-bottom
一个类似 padding-left
和 padding-right
的东西>。我有两个 div,它们有一些边框。我想让顶部 div 的 border-bottom
在左右两侧有一些 padding
。我不知道这是否可能。我知道结构很奇怪(我可以轻松地使用整个盒子包装器周围的边框,而不是使用 border-bottom
来实现这一点)。问题是,我使用的插件具有这样的结构,我必须像这样自定义它,因为正是这种结构和样式。希望它足够清楚。这里有一张图片应该是什么样子和一个示例片段:
.box {
display: flex;
flex-direction: column;
width: 200px;
}
.box__top {
border: 1px solid black;
border-bottom: 1px solid red;
height: 20px;
padding: 10px;
text-align: center;
}
.box__bottom {
border: 1px solid black;
border-top: none;
height: 150px;
padding: 10px;
text-align: center;
}
<div class="box">
<div class="box__top">
<span>I'm the top section</span>
</div>
<div class="box__bottom">
<span>I'm the top section</span>
</div>
</div>
最佳答案
改用伪元素:
.box {
display: flex;
flex-direction: column;
width: 200px;
}
.box__top {
border: 1px solid black;
border-bottom: none;
position: relative;
height: 20px;
padding: 10px;
text-align: center;
}
.box__top::after {
content: " ";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: 90%;
height: 1px;
background-color: red;
}
.box__bottom {
border: 1px solid black;
border-top: none;
height: 150px;
padding: 10px;
text-align: center;
}
<div class="box">
<div class="box__top">
<span>I'm the top section</span>
</div>
<div class="box__bottom">
<span>I'm the top section</span>
</div>
</div>
关于html - 用一些像素从左右插入边框底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48708206/