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