{"id":220,"date":"2011-05-13T12:53:58","date_gmt":"2011-05-13T12:53:58","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=220"},"modified":"2011-05-13T12:53:58","modified_gmt":"2011-05-13T12:53:58","slug":"css-borders-taller-than-text","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/css-borders-taller-than-text\/","title":{"rendered":"CSS borders taller than text"},"content":{"rendered":"<p>This morning I finally cracked a CSS mystery that has stumped me since I began using CSS! The solution, so obvious.<\/p>\n<p>A little background:<\/p>\n<ul>\n<li>Inline elements cannot have a <em>line-height<\/em>.<\/li>\n<li><em>line-height<\/em> is required to limit border height to the height of your text<\/li>\n<\/ul>\n<p>So, if you have an inline list:<\/p>\n<p><code>&lt;ul&gt;<br \/>\n\t&nbsp; &lt;li&gt;Item 1&lt;\/li&gt;<br \/>\n\t&nbsp; &lt;li&gt;Item 2&lt;\/li&gt;<br \/>\n\t&nbsp; &lt;li&gt;Item 3&lt;\/li&gt;<br \/>\n\t&lt;\/ul&gt;<br \/>\n\t<\/code><\/p>\n<p><code>ul li { display: inline; margin-left: 5px; padding-left: 5px;<br \/>\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 12px; border-left: 1px solid #000; }<br \/>\n\tul li:first-child { margin-left: 0; padding-left: 0; border: 0; }<br \/>\n\t<\/code><\/p>\n<p>The border will be a few pixels taller than the text, because it is not restricted by a <em>line-height<\/em>.<\/p>\n<p>However, if we convert the list items to block-level elements and left-float them, we can assign a line-height, forcing the border to match the text height:<\/p>\n<p><code>ul li { <strong>display: block; float: left; <\/strong>margin-left: 5px; padding-left: 5px; <br \/>\n\t&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 12px; border-left: 1px solid #000; <strong>line-height: 12px;<\/strong> }<\/p>\n<p>\t<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This morning I finally cracked a CSS mystery that has stumped me since I began using CSS! The solution, so obvious. A little background: Inline&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[77,12],"tags":[90],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/220"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=220"}],"version-history":[{"count":1,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/220\/revisions"}],"predecessor-version":[{"id":221,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/220\/revisions\/221"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}