Question

以下是代码：

我相信我删除了所有间距，但td仍为305px而img为300px height。

即使我尝试：

<td height="300">
    <img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>

或

<tr height="300">

包含<tr>。

这完全被忽略，td保持在305px？

Answer 1

因为img是内联元素，因此vertical-align:baseline会产生差距。

所以你要么：

display:block

img

或设置

vertical-align:bottom

此外，您不需要2 style个标记，也不需要使用新属性复制body规则，只需将所有内容放在一个body中规则。

注意：如果您为html-email创建此内容，请注意，非内联的CSS（上面body）某些电子邮件客户端（如gmail）会将其删除，请确保将其全部内联或使用一些会为你做的事情。

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Battersea Studios</title>
  <style type="text/css">
    #outlook a {
      padding: 0;
    }
    body {
      width: 100% !important;
       margin: 0;
      padding: 0;
      font-family: Arial;
      -webkit-font-smoothing: antialiased;
       -webkit-text-size-adjust: none;
      -ms-text-size-adjust: none;
      text-size-adjust: none;
    }
    .ReadMsgBody {
      width: 100%;
    }
    .ExternalClass {
      width: 100%;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    img {
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
      border: 0;
      display: block
    }
    a {
      border: 0;
    }
    hr {
      width: 20px;
      text-align: left
    }
    a {
      text-decoration: none;
      color: white;
    }
    a:hover {
      text-decoration: underline;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <table cellspacing="0" cellpadding="0" align="center" style="width:600px;font-size:20px">
    <tr>
      <td>
        <table cellspacing="0" cellpadding="0" style="color:white;">
          <tr>
            <td>
              <img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
            </td>
            <td style="background-color:#E66977;vertical-align:top;">
              <table cellspacing="0" cellpadding="0" align="center" width="240">
                <tr>
                  <td>
                    <img src="imgs/spacer-pink.jpg" alt="">
                  </td>
                </tr>
                <tr>
                  <td>
                    <strong>urtyryhry</strong>
                  </td>
                </tr>
                <tr>
                  <td>
                    <img src="imgs/spacer-pink.jpg" alt="">
                  </td>
                </tr>
                <tr>
                  <td>
                    ryhryhjtyhjty
                    <br>tyjtyjtyjty
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td style="background-color:#1EA553;vertical-align:top;">
              <table cellspacing="0" cellpadding="0" align="center" width="240">
                <tr>
                  <td>
                    <img src="imgs/spacer-green.jpg" alt="">
                  </td>
                </tr>
                <tr>
                  <td>
                    <strong>F</strong>
                  </td>
                  <tr>
                    <td>
                      <img src="imgs/spacer-green.jpg" alt="">
                    </td>
                  </tr>
                  <tr>
                    <td>
                      rthrthrth
                      <br>ryhryhryht
                      <br>hryhryhryt
                    </td>
                  </tr>
              </table>
            </td>
            <td>
              <img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
            </td>
            </tr>
            <tr>
              <td>
                <img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
              </td>
              <td style="background-color:#EA752E;vertical-align:top;">
                <table cellspacing="0" cellpadding="0" align="center" width="240">
                  <tr>
                    <td>
                      <img src="imgs/spacer-orange.jpg" alt="">
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <strong>rtyryry</strong>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <img src="imgs/spacer-orange.jpg" alt="">
                    </td>
                  </tr>
                  <tr>
                    <td>
                      rryu56u
                      <br>ryuryuy
                      <br>uryuryuyrt
                      <br>ytyutyuty
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
        </table>
      </td>
      </tr>
  </table>
</body>

</html>

＆＃13;

Answer 2

img是inline元素，默认情况下底部需要额外的像素。使用display: block img删除此空格：

table img {
    display: block;
}

为什么在img和td之间插入5px

2 个答案: