{"id":14065,"date":"2011-09-05T20:47:44","date_gmt":"2011-09-06T03:47:44","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14065"},"modified":"2022-05-31T07:20:36","modified_gmt":"2022-05-31T14:20:36","slug":"line-height","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/l\/line-height\/","title":{"rendered":"line-height"},"content":{"rendered":"\n<p>The <code>line-height<\/code> property defines the amount of space above and below inline elements. That is, elements that are set to <code>display: inline<\/code> or <code>display: inline-block<\/code>. This property is most often used to set the <a href=\"http:\/\/en.wikipedia.org\/wiki\/Leading\" rel=\"noopener\">leading<\/a> for lines of text.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">p {\n  line-height: 1.35;\n}<\/code><\/pre>\n\n\n\n<p>The <code>line-height<\/code> property can accept the keyword values <code>normal<\/code> or <code>none<\/code> as well as a number, length, or percentage.<\/p>\n\n\n\n<p>According to the spec, a value of &#8220;normal&#8221; is not just a single concrete value that is applied to all elements, but rather computes to a &#8220;reasonable&#8221; value depending on the font size set (or inherited) on the element.<\/p>\n\n\n\n<p>A length value can be defined using any valid CSS unit (<code>px<\/code>, <code>em<\/code>, <code>rem<\/code>, etc.).<\/p>\n\n\n\n<p>A percentage value is the font size of the element multiplied by the percentage. For example:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_DJNWWa\" src=\"\/\/codepen.io\/anon\/embed\/DJNWWa?height=450&amp;theme-id=1&amp;slug-hash=DJNWWa&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed DJNWWa\" title=\"CodePen Embed DJNWWa\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>In the demo above, the three paragraphs have their line heights set to <code>150%<\/code>, <code>200%<\/code>, and <code>250%<\/code>, respectively. The body element has its font size defined at <code>20px<\/code>. This means the computed line heights for the paragraphs are <code>30px<\/code>, <code>40px<\/code>, and <code>50px<\/code>, respectively.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"unitless-line-heights\">Unitless line heights<\/h3>\n\n\n<p>The recommended method for defining line height is using a number value, referred to as a &#8220;unitless&#8221; line height. A number value can be any number, including a decimal-based number, as is used in the first code example on this page.<\/p>\n\n\n\n<p>Unitless line heights are recommended due to the fact that child elements will inherit the raw number value, rather than the computed value. With this, child elements can compute their line heights based on their computed font size, rather than inheriting an arbitrary value from a parent that is more likely to need overriding.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/ireade\/caniuse-embed\/public\/caniuse-embed.min.js\"><\/script>\n<p class=\"ciu_embed\" data-feature=\"mdn-css__properties__line-height\" data-periods=\"future_1,current,past_1,past_2\" data-accessible-colours=\"false\">\n\n\n\n<p>IE6\/7 will miscalculate the line height on replaced elements (e.g. form controls) that are inline.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"other-resources\">Other resources<\/h3>\n\n\n<ul><li><a href=\"http:\/\/dev.w3.org\/csswg\/css-inline\/#line-height\" rel=\"noopener\"><code>line-height<\/code> on W3C<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/line-height\" rel=\"noopener\"><code>line-height<\/code> on MDN<\/a><\/li><li><a href=\"http:\/\/meyerweb.com\/eric\/thoughts\/2006\/02\/08\/unitless-line-heights\/\" rel=\"noopener\">Unitless line-heights by Eric Meyer<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The line-height property defines the amount of space above and below inline elements. That is, elements that are set to display: inline or display: inline-block. This property is most often used to set the leading for lines of text. The line-height property can accept the keyword values normal or none as well as a number, [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13933,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":350477,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/block-size\/","url_meta":{"origin":14065,"position":0},"title":"block-size","date":"August 25, 2021","format":false,"excerpt":"block-size is a CSS logical property that defines the height of an element when the writing-mode is horizontal, or the width of the element when the writing-mode is vertical. .element { block-size: 700px; writing-mode: vertical-lr; } block-size is defined in the CSS Logical Properties and Values Level 1 specification which\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14045,"url":"https:\/\/css-tricks.com\/almanac\/properties\/d\/display\/","url_meta":{"origin":14065,"position":1},"title":"display","date":"September 5, 2011","format":false,"excerpt":"Every element on a web page is a rectangular box. The display property in CSS determines just how that rectangular box behaves. span.icon { display: inline-block; \/* Characteristics of block, but lays out inline *\/ } The default value for all elements is inline. Most \"User-Agent Stylesheets\" (the default styles\u2026","rel":"","context":"In \"display\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/inline-block.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":323112,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/inline-size\/","url_meta":{"origin":14065,"position":2},"title":"inline-size","date":"October 14, 2020","format":false,"excerpt":"inline-size is a logical property that defines the width of an element when the writing-mode is horizontal, or the height of the element when the writing-mode is vertical. .element { \u00a0 inline-size: 700px; \u00a0 writing-mode: vertical-lr; } As you might have guessed by the example above, the writing-mode property changes\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":324840,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/max-inline-size\/","url_meta":{"origin":14065,"position":3},"title":"max-inline-size","date":"November 3, 2020","format":false,"excerpt":"max-inline-size is a logical property in CSS that defines the maximum width of an element when the writing-mode is horizontal, or the maximum height of the element when the writing-mode is vertical. .element { \u00a0 max-inline-size: 500px; \u00a0 writing-mode: vertical-lr; } CodePen Embed Fallback As you might have guessed by\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14057,"url":"https:\/\/css-tricks.com\/almanac\/properties\/h\/height\/","url_meta":{"origin":14065,"position":4},"title":"height","date":"September 5, 2011","format":false,"excerpt":"The height property in CSS defines specifies the content height of boxes and accepts any of the length values. The \u201ccontent\u201d area is defined as the padding and border in addition to the height\/width or size the content itself takes up. Negative values like height: -100px are not accepted. The\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":352421,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/padding-inline\/","url_meta":{"origin":14065,"position":5},"title":"padding-inline","date":"September 23, 2021","format":false,"excerpt":"padding-inline is a CSS logical shorthand property that combines the padding-inline-start and padding-inline-end properties into a single declaration, creating space around an element\u2019s content in the inline (left and right) direction. .element { padding-inline: 30px 60px; writing-mode: vertical-rl; \/* Determines the padding block direction *\/ } When we say that\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14065"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14065"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14065\/revisions"}],"predecessor-version":[{"id":366141,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14065\/revisions\/366141"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13933"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14065"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}