Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Mystery padding in table cells with image

Tags:

I hate to admit this: I'm building a complicated, but gmail-friendly HTML email blast (inline styling). Anyway, it's a game of tables and split images, and I've seemed to have forgotten all my 1995 table mojo.

http://www.highgatecross.com/development/tables/

<table border="0" cellpadding="0" cellspacing="0">     <tr>         <td><img src="skyline.jpg" alt=""></td>         <td><img src="skyline-02.jpg" alt=""></td>         <td><img src="skyline-03.jpg" alt=""></td>     </tr>     <tr>         <td colspan="3"><img src="skyline-04.jpg" alt=""></td>      </tr> </table>

I have a mystery 4-pixel "padding" below each images (the DOM panel in Firebug shows a cell "clientHeight" 4 pixels greater than my images).

I have tried every combination of deprecated HTML styling (heights, etc.) and CSS and no joy.

So, simply, how do I rid the 4 pixels and close the gap between rows?

like image 746
breadwild Avatar asked Oct 27 '10 02:10

breadwild

People also ask

How do I remove the space under an image in a table cell?

In IE7, if you have a table cell with an image displayed in it, you may have noticed a small space underneath the image in the table cell. This space occurs in IE7 but not Firefox. This space can be removed by setting the style of the image to be 'block' rather than 'inline'. This is demonstrated in style-test.

How do you add padding between cells in a table?

Cell padding is the space between cell borders and the content within a cell. To set cell padding in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <table> tag, with the CSS property padding.

What is cell padding in a table?

Cell padding is the space between the cell edges and the cell content. By default the padding is set to 0.

What is cell padding attribute?

The cellpadding attribute specifies the space, in pixels, between the cell wall and the cell content. Note: Do not confuse this with the cellspacing attribute, which specifies the space between cells.

2 Answers

Just use style="display: block" on the image.

Problem solved.

like image 160
Marko Avatar answered Oct 18 '22 12:10

Marko

I should have checked StackOverflow first!

Either:

<img src="some.jpg" style="display: block" />

or 

<img src="some.jpg" style="vertical-align: bottom" />

will eliminate the 4 pixels under the image in a table cell.

like image 33
breadwild Avatar answered Oct 18 '22 13:10

breadwild
Sign in to Comment

Related questions

TemplateDoesNotExist at/
how to check if item is selected from a comboBox in C#
mvc:annotation-driven is not bound
What's the best way to include a LIKE clause in a Rails query?
Get a reference to a struct inside array
set permissions for all files and folders recursively
What's the device code (platform string) for iPhone 5 / 5c / 5s / iPod touch 5?
Why doesn't the CSS calc() function work for me?
Printing a void* variable in C
KendoUI grid edit popup, how to hide field
Can I/How to... call a protected function outside of a class in PHP
Masonry JS Overlapping Items

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!