HTML5 Doctype causing 4px bottom margin to be added to uploaded images

  • Resolved joshdura

    (@joshdura)


    12 years, 2 months ago

    When I changed my doctype to HTML5 strict mode, it started adding margins to the bottom of any uploaded image I am displaying (using the_post_thumbnail). As far as I can tell, nothing in my CSS is doing this. As soon as I change the doctype to something else, this problem goes away. You can see the page for an example here…

    http://joshdura.com/asteria/portfolio/
    http://joshdura.com/asteria/about/

    As you can see, the yellow 5px border on each of the images is 4px below the image. You can also see it on the About page (below the main image). However, if you go to the Contact page (http://joshdura.com/asteria/contact/), the yellow border is right below the Google map. Both of these pages use the exact same code.

    Does anyone have any clue as to why this margin is there in HTML5 strict doctyped pages, but not others?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter joshdura

    (@joshdura)

    12 years, 2 months ago

    Nevermind, just figured it out. Apparently, line-height was messing with it. Setting that to 0 for the div fixed it.

    Danny de Haan

    (@dannydehaan)

    12 years, 2 months ago

    Ok, it’s resolved. Even better is to set the image inside the div to
    display:block;. Reason for this is that you can put text inside the div without having to put another element inside the div to accomplish that.

    An even better way to make your list (The real HTML5 way) is to make list-items like this:

    <ul>
	<li>
		<h1>Arizona Photography</h1>
		<figure>
			<img src="http://your-image-url.jpg" alt="Arizona Photography" />
			<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mi arcu, volutpat sed dapibus sit amet, eleifend sit amet sem. Sed consectetur ullamcorper auctor. Etiam ultrices eros sed dolor volutpat sit amet [...]</figcaption>
		</figure>
	</li>
</ul>

    Just my 2 cents 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘HTML5 Doctype causing 4px bottom margin to be added to uploaded images’ is closed to new replies.