下边框的边距 [英] Margin for bottom border

问题描述

有什么方法可以只为边框添加边距？

只有边框应该有边距而不是文字。
我试图移动边框而不是文本字段。边框需要缩小/移动而不是文本。

CSS：

  .margin-check {
 border-bottom：1px solid＃d2d7da; 
 margin-left：15px; 
} 
  

HTML：

 < div class =margin-check> 
我正在打字检查边界边距
< / div> 
  

JS小提琴：
https://jsfiddle.net/c91xhz5e/

解决方案

您可以使用伪元素，然后你可以改变边界的大小

.margin-check {display：inline-block; position：relative;}。margin-check：after {position：absolute;内容：''; border-bottom：1px solid＃d2d7da;宽度：70％; transform：translateX（-50％）;底部：-15px; left：50％;}

< div class =缘检查>我输入的用于检查边框边距的内容< / div>

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 :

 .margin-check {
          border-bottom: 1px solid #d2d7da;
          margin-left : 15px;
    }

HTML :

<div class="margin-check">
Something I am typing for checking the border margin
</div>

JS Fiddle: https://jsfiddle.net/c91xhz5e/

解决方案

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>

这篇关于下边框的边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！