{"id":171,"date":"2018-01-22T07:00:00","date_gmt":"2018-01-22T14:00:00","guid":{"rendered":"https:\/\/coreassistance.com\/tips\/?p=171"},"modified":"2018-01-19T21:44:18","modified_gmt":"2018-01-20T04:44:18","slug":"smart-line-height","status":"publish","type":"post","link":"https:\/\/coreassistance.com\/tips\/2018\/01\/22\/smart-line-height\/","title":{"rendered":"Smart Line Height"},"content":{"rendered":"<p>The <code>line-height<\/code> property has some unexpected inheritance behavior when used with a length or percentage.  Take this CSS, for example:<\/p>\n<pre><code class=\"css\">div.example {\r\n    font-size: 20px;\r\n    line-height: 1.5em;\r\n}\r\n\r\ndiv.example h2 {\r\n    font-size: 40px;\r\n}<\/code><\/pre>\n<p>With this CSS you might expect the line height of <code>h2<\/code> elements inside <code>div.example<\/code> elements to be <code>60px<\/code>, but that&#8217;s not the case.  No, with this CSS, <em>everything<\/em> inside <code>div.example<\/code> elements will get the same <code>30px<\/code> of line height <em>regardless<\/em> of their own font size, including those <code>h2<\/code> elements.<\/p>\n<p>Why is this?  When you provide a length or percentage value for the <code>line-height<\/code> property the line-height calculation is made at that point, and that calculated value is used going forward.  The <code>em<\/code> unit specifies a length, so we get the <code>30px<\/code> of line height calculated immediately and used everywhere.<\/p>\n<p>The good news is that there&#8217;s an easy way around this problem: <strong>Never provide a length or percentage value when using <code>line-height<\/code>.  Instead use a number with no unit<\/strong>, like this:<\/p>\n<pre><code class=\"css\">div.example {\r\n    font-size: 20px;\r\n    line-height: 1.5;\r\n}\r\n\r\ndiv.example h2 {\r\n    font-size: 40px;\r\n}<\/code><\/pre>\n<p>Now the line height will be calculated by multiplying the font size of whichever element the line height is being applied to.  This results in <code>30px<\/code> of line height inside <code>div.example<\/code> elements by default, and <code>60px<\/code> of line height on the <code>h2<\/code> elements inside them, just as expected.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Find out why using a length or percentage value for your line heights is a bad idea.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-171","post","type-post","status-publish","format-standard","hentry","category-htmlcss"],"_links":{"self":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/comments?post=171"}],"version-history":[{"count":7,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/171\/revisions"}],"predecessor-version":[{"id":204,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/171\/revisions\/204"}],"wp:attachment":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/media?parent=171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/categories?post=171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/tags?post=171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}