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