{"id":3,"date":"2009-05-16T09:18:31","date_gmt":"2009-05-16T16:18:31","guid":{"rendered":"http:\/\/www.curiosity.roguepenguin.net\/?p=3"},"modified":"2019-05-13T06:54:01","modified_gmt":"2019-05-13T12:54:01","slug":"xhtml-image-space","status":"publish","type":"post","link":"http:\/\/curiosity.roguepenguin.net\/?p=3","title":{"rendered":"XHTML Image Space"},"content":{"rendered":"

While working on a website for a friend, I had an odd issue with a mysterious space underneath the banner image:<\/p>\n

\"Screenshot<\/p>\n

I set the background of the image container to blue;  the blue sliver seen under the banner image there is my mysterious space.  After making no progress in expunging it in CSS through things like setting margins and padding to zero, I initially was able to hide it by giving a -4px margin.  Unfortunately (fortunately?) I am a purist and was unable to leave it that way, as I KNOW that I shouldn’t need a -4px margin for a space that by all reason shouldn’t be there.<\/p>\n

The next day at work I  explained the problem to my minion (Yes, I had a minion at the time; it was awesome).  We started looking at the HTML, stripping out all that wasn’t necessary in an effort to identify the problem.  We pared the HTML down to:<\/p>\n

<div>\n<img src=\"logo.png\" \/>\n<\/div><\/pre>\n
And still the space remained!  At this point I removed the XHTML strict DTD from the top of the document, and lo, everything was rendered correctly (or at lest rendered as I expected it to be).  At this point I whipped out my google-foo and searched for image spacing issues<\/a> using xhtml strict.<\/p>\n
As it turns out, browsers have for ages “incorrectly” rendered images in the above situation as block elements rather than inline elements.  Inline elements have some space underneath them (just like this text).  When writing the XHTML strict standard, the W3C explicitly defined the inline behavior (transitional XHTML uses the older rendering).  There are two different ways to address the space issue if it is unwanted in this situation.  The first is to use “vertical-align:bottom” (I tired this, but it didn’t work for me.  Maybe I misspelled something, maybe I put it on the wrong element).  The other option is to use “display: block” on the image.<\/p>\n
Viola!  Adding the one simple CSS tag fixed my problem.  Now I just need to find a non-convoluted way to add a shadow to my main content in CSS, but that can wait for another post.<\/p>\n","protected":false},"excerpt":{"rendered":"
Investigating unexpected whitespace under an image<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[5,4],"class_list":["post-3","post","type-post","status-publish","format-standard","hentry","category-web","tag-web-design","tag-xhtml"],"_links":{"self":[{"href":"http:\/\/curiosity.roguepenguin.net\/index.php?rest_route=\/wp\/v2\/posts\/3","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/curiosity.roguepenguin.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/curiosity.roguepenguin.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/curiosity.roguepenguin.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/curiosity.roguepenguin.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3"}],"version-history":[{"count":8,"href":"http:\/\/curiosity.roguepenguin.net\/index.php?rest_route=\/wp\/v2\/posts\/3\/revisions"}],"predecessor-version":[{"id":64,"href":"http:\/\/curiosity.roguepenguin.net\/index.php?rest_route=\/wp\/v2\/posts\/3\/revisions\/64"}],"wp:attachment":[{"href":"http:\/\/curiosity.roguepenguin.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/curiosity.roguepenguin.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/curiosity.roguepenguin.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}