html - equal spacing between text of different size in CSS -
how can equal spacing between lines of different sizes css? here base html:
<div style="font-size: 200%">a</div> <div style="font-size: 100%">b c</div> <div style="font-size: 50%">d e f</div> <div style="font-size: 25%">g h i</div> i want same spacing between each line despite different font sizes (i.e. red arrows below should equal). can't figure out how css line-height property.

i think other answers there, line-height little different. way think line-height amount of space center of letter. if line-height 50px, there 25px space above middle of letter , 25px space below middle of letter. makes line 50px tall.
so make space between them even, use margin-bottom , set line-height looks butts right top , bottom of letter (probably different depending on font use). in example below, set line-height .7 (you can see how butts letter's actual baseline , top height red border. gave margin value rem units relative original page font size, not div unique font size.
body { font-size: 24px; } div { line-height: .7; margin-bottom: 1rem; border: 1px solid red; } <div style="font-size: 200%">a</div> <div style="font-size: 100%">b c</div> <div style="font-size: 50%">d e f</div> <div style="font-size: 25%">g h i</div>
Comments
Post a Comment