Margem para o contorno inferior

Há alguma maneira de eu só poder acrescentar margem à fronteira ?

só a fronteira deve ter margem e não o texto. Estou a tentar mover a fronteira e não o campo de texto. O contorno precisa ser encolhido / movido Não texto.

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/

 7
Author: user2936008, 2016-04-11

3 answers

Você pode usar pseudo-elemento e então você pode mudar o tamanho do contorno

.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>
 12
Author: Nenad Vracar, 2016-04-11 15:19:35

Em geral, a margem é do conteúdo que neste caso é o seu texto. Você tem que usar box dimensionamento propriedade para definir a margem de sua fronteira.

* {box-sizing:border-box;}

Desta forma, a margem para todos os seus elementos será da caixa de contorno e não da caixa de conteúdo

 2
Author: Leo The Four, 2016-04-11 15:10:18

Pode usar 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>
 0
Author: Felix A J, 2016-04-11 15:16:52