Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

White space at bottom of anchor tag

Tags:

html

css

xhtml

I have an tag surrounding an image. I have a border set on the div that the tag is in. I have both margin and padding set to 0 but for some reason my tag is still about 3 pixels taller than my image. This leaves a bit of space between the image and the border, which destroys the look that I want to accomplish.

What am I doing wrong? I have tested in both FireFox and Chrome with the same results. Thanks

like image 290
Icode4food Avatar asked Jul 07 '10 18:07

Icode4food


People also ask

How do I put white space at the bottom of my website?

Add space below a line or paragraph of text To add extra space below a line or paragraph of text, or push text down lower on the page once, you can use the <br> tag.

What is preserving white space in HTML?

The HTML <pre> tag defines preformatted text preserving both whitespace and line breaks in the HTML document. This tag is also commonly referred to as the <pre> element.


1 Answers

The image is display: inline so it is treated like a character and sits on the baseline. The gap is caused by the space provided for the descender (which you find on letters like j, g, y and p).

Adjust the vertical-align with CSS: img{vertical-align: bottom}

like image 115
Quentin Avatar answered Sep 18 '22 08:09

Quentin