Question

我无法理解为什么我的href链接扩展了我的图片。我在图片上设置了宽度和高度。 My Example Site。我在stackoverflow上环顾四周，在那里我也尝试在一个href上设置高度和宽度。

我使用表的原因是基于电子邮件的基础框架。

我的代码看起来像这样：

HTML

<body>
  <table class="body">
    <tr>
      <td class="center" align="center" valign="top">
        <!-- Logo Start -->
            <table align="center" class="wrapper header float-center background-color__blue">
              <tbody>
                <tr>
                  <td class="wrapper-inner">
                    <table align="center" class="container" style="background-color:transparent">
                      <tbody>
                        <tr>
                          <td>
                            <table class="row collapse">
                              <tbody>
                                <tr>
                                  <th>
                                    <a href="https://www.google.dk/"><img src="https://3.imimg.com/data3/HR/NW/MY-18669487/english-images-2-5-animal-care-20p-26s-250x250.jpg" alt="Some text" align="center" class="float-center" width="250" height="80"></a>
                                  </th>
                                  <th class="expander"></th>
                                </tr>
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
            <!-- Logo End -->
      </td>
    </tr>
  </table>
</body>

Answer 1

为了不让链接转义图片的边界，您需要在display: inline-block;元素上设置a：

a {
  display: inline-block;
}

请注意，这会影响图像对齐。为了解决这个问题，您还需要在text-align: center元素上设置th：

th {
  text-align: center;
}

您还在line-height元素上设置了th。如果您希望图像占据th高度的100％，则需要将其删除，或将其设置为0.7：

th {
  line-height: 0.7;
}

希望这有帮助！

图像上的链接扩展了图像标记

1 个答案: