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

View: 332    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: HTML-CSS template   Fields: Other

8 point/1 review File has been tested

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.

Introduction

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

AtoZ CSS Quick Tip Setting the Line-Height in HTML & CSS Posted on 05-10-2016  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. 8/10 332

Comment:

To comment you must be logged in members.

Files with category

 

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd