Fix Space Below UL and IMG Elements

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.

Video Tutorial

The Problem - Empty Spacing Under Elements

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:

Fix Space Below UL and IMG Elements

The Fix

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: top;


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.

Related Articles
  1. Ivan says:

    WOW! I’ve been trying to find a workaround for some time. Then I kinda forgot about it. And suddenly my casual browsing pays off. Thanks dude.

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

9 + seven =

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.