Why does the HTML5 DOCTYPE mess with my padding?

html padding doctype
Dakota picture Dakota · Jun 9, 2010 · Viewed 15.3k times · Source

I have an html5 page with a navbar. Completely scratch coded. I just recently added a doctype to the item, and now I’m getting extra space under my navbar. If I remove the doctype declaration, it goes back to normal. I have completely reset padding, margins, etc. on everything, and cut it down to the a small amount of code that illustrates the issue.

The page can be seen at http://hackthetruth.org/webdesign/broken

Does anyone know why declaring the doctype is messing with the height of a div?

Answer

eamo picture eamo · Aug 11, 2010

I had the same problem with one of my sites. i found this answer here:

"With an HTML5 doctype, images receive what seems to be the line-height attribute which text normally gets, and thus you get a “margin” underneath them. You can either set them to display:block or line-height:0, although I haven’t tested the latter enough to be sure it’s a good fix."

I applied the line-height:0 to the <div> which contained the navigation images. It did the trick for me.

Related questions

Why is there an unexplainable gap between these inline-block div elements?

I have two inline-block div elements, that are the same, positioned next to eachother. However there seems to be a mysterious space of 4 pixels between the two divs despite the margin being set to 0. There are no parent divs effecting …

Read More
Padding a table row

<html> <head> <title>Table Row Padding Issue</title> <style type="text/css"> tr { padding: 20px; } </style> </head> <body> <table> <tbody> &…

Read More
How do I prevent the padding property from changing width or height in CSS?

I am creating a site with DIVs. Everything's working out except when I create a DIV. I create them like this (example): newdiv { width: 200px; height: 60px; padding-left: 20px; text-align: left; } When I add the padding-left property, the width of …

Read More