Why td adds extra padding in table?
Question
<html> <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>
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.
3 answers
solution1
6 ACCPTED 2017-02-02 02:30:32
<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 anywhere, for the hanging bits of letters like in 'p' or 'q'.
If you set it to display: block , everything will click together.
solution2
2 2017-02-02 02:32:23
A <td> tag will by default inherit display:table-cell; as a style. To resolve this, simply override that to flex .
<html> <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 style="display:flex;"><img width="500" src="https://s28.postimg.org/yrbcuftd9/zip.png"></td> </tr> </tbody> </table> </body></html>
solution3
1 2017-02-02 02:22:34
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 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.