Html 底部边框的边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36552465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Margin for bottom border
提问by user2936008
Is there any way I can only add margin to the border ?
有什么办法只能在边框上添加边距吗？
Only border should have margin not the text. I am trying to move border not the text field. Border need to be shrinked/moved not text.
只有边框应该有边距而不是文本。我正在尝试移动边框而不是文本字段。边框需要缩小/移动而不是文本。
CSS :
CSS :
.margin-check {
border-bottom: 1px solid #d2d7da;
margin-left : 15px;
}
HTML :
HTML :
<div class="margin-check">
Something I am typing for checking the border margin
</div>
JS Fiddle: https://jsfiddle.net/c91xhz5e/
JS小提琴：https: //jsfiddle.net/c91xhz5e/
回答by Nenad Vracar
You can use pseudo-element and then you can change size of border
您可以使用伪元素，然后您可以更改边框的大小
.margin-check {
display: inline-block;
position: relative;
}
.margin-check:after {
position: absolute;
content: '';
border-bottom: 1px solid #d2d7da;
width: 70%;
transform: translateX(-50%);
bottom: -15px;
left: 50%;
}<div class="margin-check">
Something I am typing for checking the border margin
</div>回答by Leo The Four
In general the margin is from the content which in this case is your text. You have to use box sizing property to set the margin from you border.
一般来说，边距来自内容，在这种情况下是您的文本。您必须使用 box sizing 属性来设置边框的边距。
* {box-sizing:border-box;}
This way the margin for all your elements will be from the border box and not the content box
这样，所有元素的边距将来自边框框而不是内容框
回答by Felix A J
You can use text-indent.
您可以使用text-indent.
.margin-check {
border-bottom: 1px solid #d2d7da;
margin-left : 15px;
text-indent: 15px;
}<div class="margin-check">
Something I am typing for checking the border margin
</div>