<!DOCTYPE html> <style> div { width:100px; height:600px; margin:5px 0 0 5px; font-size: 30px; float:left; } div#one { line-height: calc(300%); } div#two { line-height: calc(100px); } div#three { line-height: calc(20px + 300%); } div#four { line-height: calc(10px * 2); } div#five { line-height: calc(50% - 3px); } div#six { line-height: calc(25% - 3px + 25%); } div#seven { line-height: calc(25% - 3px + 12.5% * 2); } div#eight { line-height: calc(25% - 3px + 12.5%*2); } div#nine { line-height: calc(25% - 3px + 2 * 12.5%); } div#nine { line-height: calc(25% - 3px + 2*12.5%); } div#ten { line-height: calc(25% - 3px + 2 * 12.5%); } div#div-11 { line-height: calc(30% + 20%); } div#div-12 { line-height: calc(3 * 2 + 3 / 6); } </style> <div id="one">line height is 300%</div> <div id="two">line height is 100px</div> <div id="three">line height is 50px</div> <div id="four">line height is 10px * 2</div> <div id="five">line height is 50% - 3px</div> <div id="six">line height is 25% - 3px + 25%</div> <div id="seven">line height is 25% - 3px + 12.5% * 2</div> <div id="eight">line height is 25% - 3px + 12.5%*2</div> <div id="nine">line height is 25% - 3px + 2*12.5%</div> <div id="ten">line height is 25% - 3px + 2 * 12.5%</div> <div id="div-11">line height is 30% + 20%</div> <div id="div-12">line height is 3 * 2 + 3 / 6</div> </html>