The other day I was having trouble eliminating gaps between an image and the top of an unordered list. I was trying to make a box with rounded corners to look like a giftcard. No matter what I tried, there was a 2 pixel space between the top and bottom graphics and the list.

The client wanted the images to print, so I couldn’t use them as background images, which I typically use for non-content images. (Does anyone know if you can override a browser’s default settings to make a background image print?)

At first I tried placing my images and the unordered list into a div. I thought if I set the list’s margins to zero and made the div the same width as the images, then the images should sit on top and bottom of the list. The code looked like this:

<style type=”text/css”>
div {width: 280px;}
ul {margin: 0; padding: 0; border-left: 1px solid #000; border-right: 1px solid #000;}
li {margin: 0; padding: 10px; list-style: none;}
</style>
<div>
<img src=”top.jpg” alt=”” />
<ul>
<li>Example</li>
</ul>
<img src=”bottom.jpg” alt=”” />
</div>

I tried deleting the line returns between my code to see if they were causing spaces, but that didn’t help. I tried setting the margins of the image to be 0. I thought maybe my images were inheriting some margins from somewhere else in the stylesheet, so I tried using just the HTML and CSS for my giftcard on their own document, but that didn’t help either. I tried putting the images in the unordered list itself, but that didn’t help. I tried setting the height of the <li> for the top and bottom image to be the same height as the image itself, which worked for the top image, but not the bottom one. I even resorted to tables placing the graphics in their own cells with their height set at the same as the images’, which I was quite surprised didn’t work. I triple checked my images in Photoshop to see if I had cropped the image properly, and it was. Finally, my coworker suggested making the div’s position relative and then position the images absolutely, and holy sweet relief that worked!

I still don’t know why the spaces were in there in the first place and it was happening consistently across browsers and platforms. If anyone has any answers, I would love to know them. But in the mean time, if you are frustrated with gaps above and below your images, positioning worked for me.

LEAVE A REPLY