CODEWITHSUNDEEP
htmlcss
Brian
Brian

Reputation: 2619

white space around an img tag within a th

img space

This question involves the black box from the picture (it is a <th> tag).

The <th> tag ends up with a height of 23px. The images are 18px by 18px. Where's the 5px bottom margin coming from and how to I get rid of it?

borders, padding, and margins are all set to 0. manually setting the height of the <tr> and the <th> tag to 18px doesn't do anything. Anything below 23px has no effect.

Help!

Upvotes: 1

Views: 2741

Answers (4)

Guffa
Guffa

Reputation: 700332

Images are inline elements, so they are placed on a text line in the element. The images are aligned on the base line of the text, so there is a gutter below the base line used for hanging characters like g and j. The extra space is that gutter.

You can get rid of the space by turning the images into block elements. As you want the images beside each other, using the style float:left; would make them block elements and line them up.

Upvotes: 2

mu is too short
mu is too short

Reputation: 434665

That's probably the line-height. Try setting it to zero. Sample HTML:

<table>
    <tbody>
        <tr>
            <td>
                <img src="http://placekitten.com/16/16">
                <img src="http://placekitten.com/16/16">
            </td>
        </tr>
    </tbody>
</table>

And CSS:

td {
    background: #000;
    line-height: 0;
}

Live example: http://jsfiddle.net/ambiguous/4VMTV/

Try the above with and without the line-height: 0 and you should see the difference.

Upvotes: 1

roberkules
roberkules

Reputation: 6605

Do you have white spaces around the images in your html source code? If yes, try removing them:

<th><img src="..." alt="" /></th>

Upvotes: 1

George Cummins
George Cummins

Reputation: 28906

If you use Chrome or Firefox+Firebug, you can right-click the th and inspect the element. This will provide additional detail that will help you to determine what padding or margin is being added, and why.

Upvotes: 0

Related Questions