line-height-1.html (1358B)
1 <!DOCTYPE html> 2 <style> 3 div { 4 width:100px; 5 height:600px; 6 margin:5px 0 0 5px; 7 font-size: 30px; 8 float:left; 9 } 10 div#one { 11 line-height: calc(300%); 12 } 13 div#two { 14 line-height: calc(100px); 15 } 16 div#three { 17 line-height: calc(20px + 300%); 18 } 19 div#four { 20 line-height: calc(10px * 2); 21 } 22 div#five { 23 line-height: calc(50% - 3px); 24 } 25 div#six { 26 line-height: calc(25% - 3px + 25%); 27 } 28 div#seven { 29 line-height: calc(25% - 3px + 12.5% * 2); 30 } 31 div#eight { 32 line-height: calc(25% - 3px + 12.5%*2); 33 } 34 div#nine { 35 line-height: calc(25% - 3px + 2 * 12.5%); 36 } 37 div#nine { 38 line-height: calc(25% - 3px + 2*12.5%); 39 } 40 div#ten { 41 line-height: calc(25% - 3px + 2 * 12.5%); 42 } 43 div#div-11 { 44 line-height: calc(30% + 20%); 45 } 46 div#div-12 { 47 line-height: calc(3 * 2 + 3 / 6); 48 } 49 </style> 50 <div id="one">line height is 300%</div> 51 <div id="two">line height is 100px</div> 52 <div id="three">line height is 50px</div> 53 <div id="four">line height is 10px * 2</div> 54 <div id="five">line height is 50% - 3px</div> 55 <div id="six">line height is 25% - 3px + 25%</div> 56 <div id="seven">line height is 25% - 3px + 12.5% * 2</div> 57 <div id="eight">line height is 25% - 3px + 12.5%*2</div> 58 <div id="nine">line height is 25% - 3px + 2*12.5%</div> 59 <div id="ten">line height is 25% - 3px + 2 * 12.5%</div> 60 <div id="div-11">line height is 30% + 20%</div> 61 <div id="div-12">line height is 3 * 2 + 3 / 6</div> 62 </html>