\n Sara Cope <\/a>\n <\/div>\n\n<\/article>\n <\/div>\n \n","protected":false},"excerpt":{"rendered":"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 height property does not apply […]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13925,"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":332875,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/aspect-ratio\/","url_meta":{"origin":14057,"position":0},"title":"aspect-ratio","date":"January 20, 2021","format":false,"excerpt":"The CSS property aspect-ratio lets you create boxes that maintain proportional dimensions where the height and width of a box are calculated automatically as a ratio. It's a little math-y, but the idea is that you can divide one value by another on this property and the calculated value ensures\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-29-at-6.23.02-AM.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":14071,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/min-height\/","url_meta":{"origin":14057,"position":1},"title":"min-height","date":"September 5, 2011","format":false,"excerpt":"The min-height property in CSS is used to set the minimum height of a specified element. The min-height property always overrides both height and max-height. Authors may use any of the length values as long as they are a positive value. .wrapper { height: 100%; \/* full height of the\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":350477,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/block-size\/","url_meta":{"origin":14057,"position":2},"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":14073,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/max-height\/","url_meta":{"origin":14057,"position":3},"title":"max-height","date":"September 5, 2011","format":false,"excerpt":"The max-height property in CSS is used to set the maximum height of a specified element. Authors may use any of the length values as long as they are a positive value. max-height overrides height, but min-height always overrides max-height. .wrapper { height: 100%; \/* full height of the content\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14053,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font\/","url_meta":{"origin":14057,"position":4},"title":"font","date":"September 5, 2011","format":false,"excerpt":"The font property in CSS is a shorthand property that combines all the following sub-properties in a single declaration. body { font: normal small-caps normal 16px\/1.4 Georgia; } \/* is the same as: body { font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; } *\/ There\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":178807,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/column-fill\/","url_meta":{"origin":14057,"position":5},"title":"column-fill","date":"August 14, 2014","format":false,"excerpt":"When you add height to a multi-column element, you can control how the content fills the columns. The content can be balanced or filled sequentially. ul { height: 300px; -webkit-columns: 3; -moz-columns: 3; columns: 3; -moz-column-fill: balance; column-fill: balance; } This property is only available in Firefox. Firefox will automatically\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14057"}],"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=14057"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14057\/revisions"}],"predecessor-version":[{"id":332917,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14057\/revisions\/332917"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13925"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14057"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}