UL even margin with different heights

Question

I have UL, which contains several photos for the portfolio, which only in some photos need a simple line of text containing the name of the model.

I wrote it like this:

<ul> <li><img src="img/1.jpg" alt="image" /><p>Model Name</p></li> <li><img src="img/2.jpg" alt="image" /></li> </ul> 

My problem is that the photo with the caption will be higher (for example, it has a different edge on top) here is a screen of what I'm trying to describe:

I want all the photos to have the same space above them.

The full code can be seen here: http://prv.sampettersson.com

Answer 1

The trick is to use vertical-align: top in <li> elements. The default value is baseline , which produces the result you see.