Posted on September 3, 2015 in HTML/CSS Category with Easy Difficulty
In this simple tutorial you will learn how to fix the empty space below the ul and img elements that are located inside a div, caused by the vertical-align property which is different for HTML5 doctype declaration than the other ones.
If you want to learn more about HTML doctype declaration, check this link from W3Schools, to find out which tags are supported to each doctype. Unfortunately, I find any official documentation about this problem, but you can read some more explanations here at W3C website.
If you are using HTML5 doctype in your html document, there will be some changes applied to your elements. Their default vertical-align property will be set to baseline and this will cause the empty space under the inline elements such as ol, ul or img elements as they are inline objects. Check the sample image below:
To remove the space below these elements, you need to set the vertical align to top, or to change the display to block. I recommend you to use the vertical align trick as block display will break the layout if you have another objects inside that uses float. You can read more about vertical-align property here.
Vertical align property is only allowed in certain doctypes. In HTML5 the default value is baseline, but in another doctype than HTML5, such as XHTML 1.0 Transitional, vertical-align property will be disabled. You can try it yourself to see the differences.