Question

有什么方法我只能在边界添加保证金吗？

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

CSS：

__call()

HTML：

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

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

Answer 1

您可以使用伪元素，然后可以更改边框的大小

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 2

一般来说，保证金来自内容，在这种情况下是你的文字。您必须使用box大小调整属性来设置边界的边距。

* {box-sizing:border-box;}

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

Answer 3

在您的情况下，左右没有边界，您只需调整行高即可。

.margin-check {
   line-height:2em;
}

Answer 4

您可以使用text-indent。

＆＃13;

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

＆＃13;

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

＆＃13;

底边的保证金

4 个答案: