Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
6 views

HTML - Why TD Adds Extra Padding in Table - Stack Overflow

Uploaded by

filmazy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

HTML - Why TD Adds Extra Padding in Table - Stack Overflow

Uploaded by

filmazy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

6/11/24, 6:41 PM html - Why td adds extra padding in table?

- Stack Overflow

2024 Developer survey is here and we would like to hear from you! Take the 2024 Developer Survey

Why td adds extra padding in table?


Asked 7 years, 4 months ago Modified 3 years, 9 months ago Viewed 3k times

<html>
3 <body style="background:grey;">
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="
background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png);
height: 9px;
"></td>
</tr>
<tr>
<td style="
background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png);
height: 9px;
"></td>
</tr><tr>
<td><img width="500" src="https://s28.postimg.org/yrbcuftd9/zip.png"></td>
</tr>
</tbody>
</table>
</body></html>

Run code snippet Expand snippet

I don't understand why the height of third zip image is 18. Basically, when I add the image as
background,there is no gap between each row (No gap between row 1 and row 2). However,
when I use image tag, it creates gap between row 2 and row 3. I don't understand why. Any
ideas? And also how can I delete the gap between row 2 and there.

html html-table

Share Improve this question Follow edited Feb 5, 2017 at 13:09 asked Feb 2, 2017 at 2:13
Brian Tompsett - 汤莱恩 Haoyu Chen
5,837 72 60 132 1,790 1 22 32

Lastly, after getting the insight from other developers, I found I could resolve it by simply adding
valign="top" in img tag. I am working to add template for email. So that might be the best answer

https://stackoverflow.com/questions/41993156/why-td-adds-extra-padding-in-table?rq=3 1/3
6/11/24, 6:41 PM html - Why td adds extra padding in table? - Stack Overflow

because of constrain. – Haoyu Chen Feb 10, 2017 at 1:22

3 Answers Sorted by: Highest score (default)

<img> is considered inline by default, so like other inline elements, it has a line height and space
for descenders. Descender space is that little padding under each line that isn't accounted for
8 anywhere, for the hanging bits of letters like in 'p' or 'q'.

If you set it to display: block , everything will click together.

Share Improve this answer Follow answered Feb 2, 2017 at 2:30


ppajer
3,115 1 16 23

Amazing. Never knew about this after so many years. I had the same issue with a <canvas> element. Thank
you. – Drew LeSueur Aug 16, 2020 at 7:50

A <td> tag will by default inherit display:table-cell; as a style. To resolve this, simply override
that to flex .
2
<html>
<body style="background:grey;">
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
+50 <td style="
background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png);
height: 9px;
"></td>
</tr>
<tr>
<td style="
background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png);
height: 9px;
"></td>
</tr><tr>
<td style="display:flex;"><img width="500"
src="https://s28.postimg.org/yrbcuftd9/zip.png"></td>
</tr>
</tbody>
</table>
</body></html>

Run code snippet Expand snippet

https://stackoverflow.com/questions/41993156/why-td-adds-extra-padding-in-table?rq=3 2/3
6/11/24, 6:41 PM html - Why td adds extra padding in table? - Stack Overflow

Share Improve this answer Follow answered Feb 2, 2017 at 2:32


RizJa
2,001 1 22 40

Anything added through the CSS is not considered 'content' by the browser.

The only reason you see the first two rows is because of the height:9px; CSS. If you remove that
1
you will see that the rows do not appear (0 height) this is because the rows do not contain any
content so they rely on CSS to specify their dimensions.

Because the last <td> has content in the <img ... tag it will display the image with the standard
table spacing as this has not been overridden by any css.

Share Improve this answer Follow edited Feb 2, 2017 at 2:29 answered Feb 2, 2017 at 2:22
Jake
1,207 2 29 46

But why the height of last td is 9px ? Even when I set height as 9x for the last one, it still keeps it as
18px – Haoyu Chen Feb 2, 2017 at 2:30

The height of the last one (at least from the original code) does not have any CSS applied to it.and as
explained better by @RizJa <td> 's will inherit defaults if nothing else is specified. These values can be
seen in the "Computed" tab of browser developer tools. – Jake Feb 2, 2017 at 2:36

https://stackoverflow.com/questions/41993156/why-td-adds-extra-padding-in-table?rq=3 3/3

You might also like