Question

我在html中有一行，三列表，有不需要的垂直填充。我有三张图片，每张图片左边对齐，一张中心，右边一张。我已经尝试将边距和填充设置为0，但都不起作用。我用浏览器光标突出显示了图像和表格，以显示不需要的填充。有谁知道如何解决这一问题？

enter image description here

...
<style>
  table {
    border-collapse:collapse;
    table-layout:fixed;
    width:100%;
    cellpadding: 0;
  }
  tr {
    padding:0;
    margin:0;
    word-wrap:break-word;
  }
  td {
    padding:0;
    margin:0;
    word-wrap:break-word;
  }
  </style>
</head>
<body>

<table border="1">
  <tr>
    <td>
      <img src="smiley.gif" alt="Smiley face" width="42" height="42" align="left">
    </td>
    <td>
      <p style="text-align:center">
        <img src="smiley.gif" alt="Smiley face" width="42" height="42" align="middle" >
      </p>
    </td>
    <td>
      <img src="smiley.gif" alt="Smiley face" width="42" height="42" align="right">
    </td>
  </tr>
</table>
...

修改

enter image description here

Answer 1

图像本身是否有填充？我先检查一下。如果表格单元格适合笑脸，但笑脸有白色边框，则可以这样做。

Answer 2

你似乎拥有42像素高度的整行，这让我相信不需要的填充是图片本身的一部分，你设置的高度恰好是42像素。

所以，我试图将行高强制为例如60像素，这样不仅图像可以将整行拉伸到它的尺寸，还增加了一些垂直对齐和vo ... ...为我工作：

<tr style="height: 60px; vertical-align: top;">

P.S。我看到了你的更新......看起来很奇怪，直到你没有改变截图的大小:)无论如何，尝试指定整行的vertical-align，它可能适合你。

Answer 3

我明白了：

这是默认的段落元素边距。我刚刚添加了＃34;保证金：0;＆＃34;风格。

<table border="1">
  <tr>
    <td>
      <img src="smiley.gif" alt="Smiley face" width="42" height="42" align="left">
    </td>
    <td>
      <p style="text-align:center; margin:0;">
        <img src="smiley.gif" alt="Smiley face" width="42" height="42" align="middle" >
      </p>
    </td>
    <td>
      <img src="smiley.gif" alt="Smiley face" width="42" height="42" align="right">
  </tr>
</table>

html表中不受欢迎的垂直填充

3 个答案: