2016-04-11 26 views
3

Gibt es eine Möglichkeit, kann ich nur Marge an der Grenze hinzufügen?Rand für unteren Rand

Nur Rand sollte Rand nicht den Text haben. Ich versuche, Grenze nicht das Textfeld zu verschieben. Rand muss verkleinert/verschoben werden, nicht 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/

+1

was versuchen Sie zu tun? – DanyCode

+0

Ich versuche, Grenze nicht Textfeld bewegen – user2936008

+0

Versuchen Sie zu sagen, die Grenze aus dem Text nach unten verschieben? –

Antwort

7

Sie können Pseudoelement verwenden und dann können Sie Größe der Grenze ändern

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

+0

Danke für die Antwort in meinem Code versuchen. – user2936008

+0

Wenn Sie die Größe der Grenze nicht ändern möchten, sondern nur nach rechts verschieben, dann können Sie dies einfach tun https://jsfiddle.net/c91xhz5e/2/ –

+0

dies funktioniert die Antwort akzeptiert dank – user2936008

1

leicht durch Ihre Frage verwirrt (nicht ganz sicher, was Sie suchen zu tun), aber Möglicherweise möchten Sie padding verwenden, im Gegensatz margin:

.margin-check { 
 
     border-bottom: 1px solid #d2d7da; 
 
     padding-left: 15px; 
 
}
<div class="margin-check"> 
 
Something I am typing for checking the border margin 
 
</div>

Ebenso können Sie auch padding-bottom hinzufügen, wenn Sie Abstand zwischen dem Text und der Grenze wollen ...

+0

Ich möchte den Rahmen verschieben, nicht den Text. Genau wie Sie Text verschoben haben – user2936008

1

Im Allgemeinen ist der Rand von dem Inhalt, der in diesem Fall Ihr Text ist. Sie müssen die Box-Sizing-Eigenschaft verwenden, um den Rand von Ihrem Rahmen festzulegen.

* {box-sizing:border-box;} 

diese Weise wird die Marge für alle Elemente von der Grenze Box und nicht der Inhalt Box

+0

Das ist, was ich wollte, können Sie mir ein Beispiel zum besseren Verständnis geben – user2936008

0

Sie text-indent verwenden sein.

.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

Ich denke, dass das OP will die Grenze die _margin_ und ** nichts anderes ** erhalten – Jay

Verwandte Themen