{"id":1874,"date":"2016-07-07T10:27:31","date_gmt":"2016-07-07T15:27:31","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1874"},"modified":"2016-07-07T10:27:31","modified_gmt":"2016-07-07T15:27:31","slug":"how-to-use-css3s-line-height-property","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-use-css3s-line-height-property\/","title":{"rendered":"How to Use CSS3’s Line-Height Property"},"content":{"rendered":"

CSS3’s line-height property is one that is often underrated and misunderstood. The property can be very helpful in styling certain elements, and it can take many different types of values, including number values, pixel values, and percentages. Let’s apply it to this paragraph to see how it works:<\/p>\n

\"Screen<\/p>\n

This paragraph has the default line-height value (“normal”). One type of value that the line-height property takes is a number. The number value applied to the text will take the font-size and multiply that by the applied value to set the new line-height. In the example below, the font-size is 16px.<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. p{<\/span><\/div><\/li>\n
  2.  <\/div><\/li>\n
  3. line-height<\/span>:<\/span> 3<\/span>;<\/span><\/div><\/li>\n
  4.  <\/div><\/li>\n
  5. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    \"Screen<\/p>\n

    The line-height property also takes a fixed value in pixels, ems, and other units of measurement.<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. p{<\/span><\/div><\/li>\n
    2.  <\/div><\/li>\n
    3. line-height<\/span>:<\/span> 30px<\/span>;<\/span><\/div><\/li>\n
    4.  <\/div><\/li>\n
    5. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      \"Screen<\/p>\n

      Finally, the property takes a percentage value. This will set the line-height to a percentage of the font-size.<\/p>\n

      \r\n\r\n\t\t
      \r\n\r\n\t\t
      \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
      css<\/div>\r\n\r\n\t\t\r\n\t\t
      \r\n\r\n\t<\/div>\r\n\t\r\n\t
      \r\n\t\t
      1. p{<\/span><\/div><\/li>\n
      2.  <\/div><\/li>\n
      3. line-height<\/span>:<\/span> 20%<\/span>;<\/span><\/div><\/li>\n
      4.  <\/div><\/li>\n
      5. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

        \"Screen<\/p>\n

        Now that you have a handle on how exactly the line-height property works, try using it in your next project!<\/p>\n

        Share and Enjoy !<\/h3>
        0<\/span><\/span>Shares<\/small><\/div>
        <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

        CSS3’s line-height property is one that is often underrated and misunderstood. The property can be very helpful in styling certain elements, and it can take many different types of values, including number values, pixel values, and percentages. Let’s apply it […]<\/p>\n

        Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2750,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1874"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1874"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1874\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2750"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1874"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1874"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}