在 HTML table 中插入图片后出现空白 space

Question

当我在table数据中插入一张图片时，右边有很多白色space。你能告诉我为什么存在吗？

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Lorem, ipsum.</title>
    </head>
    <body>
        
       
        <table>
            <tr>
                <td><img src="./profile.jpg" alt="rashmi-profile" width="20%"/></td>
                <td> 
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, in.
                </td>
            </tr>
        </table>
    </body>
    </html>

请看下面的输出我想删除 table 数据中图像后多余的 space

Answer 1

使用 em 代替 %:

table,td {
  border: solid;
}

<table>
  <tr>
    <td><img src="https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg" alt="rashmi-profile" width="100em" /></td>
    <td>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, in.
    </td>
  </tr>
</table>

因为当你使用20%时，td的宽度被认为是图像的5倍。

在 HTML table 中插入图片后出现空白 space

A blank space appears after inserting an image in an HTML table

html

css

frontend