Remove the Gap Under the Web Images

Started by Kalyan, Dec 01, 2008, 03:55 PM

Previous topic - Next topic

Kalyan

Remove the Gap Under the Web Images

Images are inline elements, which means they are treated in the same way as text. Most people kind of know this - they know that if you use 'text-align:center' on an image it will be centered.

What many people don't realize is that this means you will have a gap underneath an image. This gap is for the descenders of letters like j,q,p,y and g. To get rid of this gap you need to make the image block-level - like this :

CSS

img {display:block;}

One problem that this can cause is when you want to have a few images next to each other - if they are block-level, they won't be next to each other. To get around that, you can use float:left. Of course, this might present another problem - maybe you don't want the image to float left. In this case, you can use an unordered list like this :


CSS

ul, li {
list-style-type:none;
padding:0;
margin:0 auto;
}
ul {
width:150px;
}
li {
float:left;
}

HTML

< ul>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50" alt="wine" /></li>
</ul>

Quick Reply

Warning: this topic has not been posted in for at least 120 days.
Unless you're sure you want to reply, please consider starting a new topic.

Note: this post will not display until it has been approved by a moderator.

Name:
Email:
Verification:
Please leave this box empty:
Type the letters shown in the picture
Listen to the letters / Request another image

Type the letters shown in the picture:

Shortcuts: ALT+S post or ALT+P preview