Loading...
Loading...
Loading...
Loading...

AtoZ CSS Quick Tip Setting the Line-Height in HTML & CSS

View: 573    Dowload: 0   Comment: 0   Post by: hanhga   Category: HTML-CSS template   Fields: Other

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, in this article I’ve added a new quick tip/lesson about the line-height property for you.

L is for line-height

In this quick tip, we’ll look at a shorthand for setting font-size and line-height together to save yourself a couple of extra keystrokes.

line-height, as discussed in the original screencast video, is a property for setting the height of a line in CSS. It’s similar (but slightly different) to leading in print design.

Tip 1

line-height only applies to elements that have their display set to inline or inline-block and it actually sets the height of the line box that bounds the element. If you set line-height on a block element, you may still see some changes to your styles but it’s actually the inline child elements that are being affected as line-height is an inherited property.

When setting line-height without a unit (as I recommend in the video), the computed value is the line-height multiplied by the current element’s font-size.

{
  font-size: 20px;
  font-family: 'Avenir', sans-serif;
  line-height: 1.5; /* 30px */
}

Tip 2

If you need to set both line-height and font-size at the same time, there’s a handy shorthand via the font property.

This shorthand allows you to set font-stylefont-variantfont-weightfont-sizeline-height and font-family in a single line.

The snippet from the tip above, could be combined into a single fontshorthand as follows:

{
  font: 20px/1.5 'Avenir', sans-serif;
}

When using this shorthand syntax, the order of declaration is important.

  1. The font-family must be the last declaration
  2. The line-height must follow the font-size immediately and be separated by a forward slash /
  3. font-stylefont-variant and font-weight must be defined before font-size and line-height.

A full example using all the available font properties may look as follows:

{
  /* style | variant | weight | size/line-height | family */

  font: italic small-caps 700 20px/1.5 'Avenir', sans-serif;
}

AtoZ CSS Quick Tip Setting the Line-Height in HTML & CSS

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet.

Posted on 05-10-2016 

Comment:

To comment you must be logged in members.

Files with category

 
File suggestion for you
File suggestion for you
File suggestion for you
File suggestion for you
Loading...
Loading...
Loading...
Loading...
File top downloads
File top downloads
File top downloads
File top downloads
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd