{"id":1207,"date":"2024-05-31T14:49:34","date_gmt":"2024-05-31T18:49:34","guid":{"rendered":"http:\/\/philsinatra.net\/blog\/?p=1207"},"modified":"2024-05-31T15:02:44","modified_gmt":"2024-05-31T19:02:44","slug":"line-height-units","status":"publish","type":"post","link":"https:\/\/philsinatra.net\/blog\/line-height-units\/","title":{"rendered":"Line height units"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">The <code>lh<\/code> and <code>rhl<\/code> units<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><code>html: line-height<\/code><\/h3>\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\nhtml {\n  font-size: 1.1rem;\n  line-height: 1.4;\n}\n<\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>line-height: 1.4;<\/code><\/strong>: This sets the line height for the entire HTML document relative to the font size. A <code>line-height<\/code> of 1.4 means the space between lines of text is 1.4 times the font size. This improves readability by providing adequate spacing between lines.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><code>section: padding<\/code><\/h3>\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\nsection {\n  padding: 2rlh;\n  margin-trim: block;\n}\n<\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>padding: 2rlh;<\/code><\/strong>: This sets the padding inside each <code>section<\/code> element. The value <code>2rlh<\/code> uses the <code>rlh<\/code> (root line height) unit, which is calculated based on the <code>line-height<\/code> of the <code>html<\/code> element. Given <code>html { line-height: 1.4; }<\/code>, the root line height (rlh) becomes 1.4 times the root font size. Here, <code>2rlh<\/code> means padding is set to twice the root line height.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><code>h1, p: margin-block<\/code><\/h3>\n\n\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\nh1 {\n  font-size: 2rem;\n  line-height: 1.2;\n}\nh1, p {\n  margin-block: 1rlh;\n}\n<\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>margin-block: 1rlh;<\/code><\/strong>: This sets the margin on both the <code>block-start<\/code> and <code>block-end<\/code> (top and bottom) of <code>h1<\/code> and <code>p<\/code> elements to <code>1rlh<\/code>. The value <code>1rlh<\/code> uses the <code>rlh<\/code> (root line height) unit and it ensures consistent vertical spacing relative to the root line height. Given the <code>html { line-height: 1.4; }<\/code>, <code>1rlh<\/code> corresponds to a margin equal to the root line height, facilitating consistent and proportional spacing.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\" style=\"margin: 3rem 0;\"><a href=\"http:\/\/philsinatra.net\/blog\/wp-content\/uploads\/2024\/05\/lh-vertical-rhythm.png\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"627\" src=\"http:\/\/philsinatra.net\/blog\/wp-content\/uploads\/2024\/05\/lh-vertical-rhythm-600x627.png\" alt=\"\" class=\"wp-image-1209\" srcset=\"https:\/\/philsinatra.net\/blog\/wp-content\/uploads\/2024\/05\/lh-vertical-rhythm-600x627.png 600w, https:\/\/philsinatra.net\/blog\/wp-content\/uploads\/2024\/05\/lh-vertical-rhythm-252x263.png 252w, https:\/\/philsinatra.net\/blog\/wp-content\/uploads\/2024\/05\/lh-vertical-rhythm-768x802.png 768w, https:\/\/philsinatra.net\/blog\/wp-content\/uploads\/2024\/05\/lh-vertical-rhythm.png 904w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Summary<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>html<\/code> element<\/strong>: Sets a global line height of 1.4, establishing the base root line height (rlh) for the document.<\/li>\n\n\n\n<li><strong><code>section<\/code> element<\/strong>: Applies padding based on twice the root line height (<code>2rlh<\/code>) and trims margins.<\/li>\n\n\n\n<li><strong><code>h1, p<\/code> elements<\/strong>: Assigns a block margin of <code>1rlh<\/code>, ensuring proportional and consistent vertical spacing relative to the root line height, enhancing the layout&#8217;s readability and visual balance.<\/li>\n<\/ul>\n\n\n\n<p>The result is a vertical rhythm that matches the height of a line of text even though no actual text is present between elements.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The lh and rhl units html: line-height html { font-size: 1.1rem; line-height: 1.4; } section: padding section { padding: 2rlh; margin-trim: block; } h1, p: margin-block h1 { font-size: 2rem; line-height: 1.2; } h1, p { margin-block: 1rlh; } Summary The result is a vertical rhythm that matches the height of a line of text [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[183],"tags":[192],"class_list":["post-1207","post","type-post","status-publish","format-standard","hentry","category-web-development","tag-css"],"_links":{"self":[{"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/posts\/1207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/comments?post=1207"}],"version-history":[{"count":5,"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/posts\/1207\/revisions"}],"predecessor-version":[{"id":1218,"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/posts\/1207\/revisions\/1218"}],"wp:attachment":[{"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/media?parent=1207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/categories?post=1207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/philsinatra.net\/blog\/wp-json\/wp\/v2\/tags?post=1207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}