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.

enter image description here

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

Popular posts from this blog

c# - how to use buttonedit in devexpress gridcontrol -

java - Oracle EBS .ClassNotFoundException: oracle.apps.fnd.formsClient.FormsLauncher.class ERROR -

c# - System.FormatException' occurred in MongoDB.Bson.dll - XXX is not a valid 24 digit hex string -