底部边框的边距

Question

有什么办法只能在边框上添加边距吗？

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

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 小提琴： https ://jsfiddle.net/c91xhz5e/

原文由 user2936008 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 .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>

原文由 Nenad Vracar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

一般来说，边距来自内容，在这种情况下是您的文本。您必须使用 box sizing 属性来设置边框的边距。

 * {box-sizing:border-box;}

这样你所有元素的边距将来自边框而不是内容框

原文由 Leo The Four 发布，翻译遵循 CC BY-SA 3.0 许可协议