Advanced Search

Line-height calculator LESS

/ Published in: CSS
Save to your folder(s)
Simple snippet for calculation font-size, line-height, and margin-bottom.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. @defaultfontsize: 16;
  2. @defaultlineheight: @defaultfontsize*1.375;
  3.  
  4. .font(@fontsize:16,@lineheight:22,@multiplier:1,@lineheightreducer:1) {
  5. 	font-size: (@fontsize/@defaultfontsize)*1em;
  6. 	line-height: @lineheight/@fontsize/@lineheightreducer;
  7. 	margin: 0 0 (@lineheight/@fontsize*(@multiplier/(@lineheight/@defaultlineheight)))*1em 0;
  8. }
  9.  
  10. .boxes(@paddingtop:1,@paddingbottom:1,@bordertop:0,@borderbottom:0) {
  11. 	@border-top-width: @bordertop*1px;
  12. 	@border-bottom-width: @borderbottom*1px;
  13. 	padding-top: e(%("%sem%s", (((@paddingtop*@defaultlineheight)-@bordertop)/@defaultfontsize), `@{bordertop}>=1?'; border-top-width: @{border-top-width}':''` ));	
  14. 	padding-bottom: e(%("%sem%s", (((@paddingbottom*@defaultlineheight)-@borderbottom)/@defaultfontsize)*1, `@{borderbottom}>=1?'; border-bottom-width: @{border-bottom-width}':''` ));
  15. }
  16.  
  17. h1 {
  18.  .font(48,25);
  19. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.