html - 为什么使用 <a href> 链接包装图像会改变页面的布局？

Question

向图像添加 会使图像周围的框变大，并迫使图像右侧的文本更靠右。我想让图像链接到另一个页面，同时保持当前格式。

我尝试添加到图像(alt 是连接器)(如下所示)，但它不起作用。 ( https://www.w3schools.com/html/html_images.asp - 图像作为链接 使用周围)。

我希望将 添加到图像中只会使图像链接到另一个页面，但它改变了图像框的大小并将文本推到了图像的右侧。

页面:https://www.flexsweep.com/pages/aboutourproducts (显示应有的布局 - 如果需要，可以进行检查。)

/*Image and Advantages*/

.content {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.content img {
  width: 50%;
  margin-right: 70px;
}

.details {
  width: 50%;
}

<div id="PushBrooms" class="tabcontent">

  <p>Intro text.</p>

  <div class="content">
    <img src="https://cdn.shopify.com/s/files/1/2355/6001/files/BlackConnector.PushBroom.White.Smooth.jpg?765" alt="Connector" />

    <div class="details">
      <p>
        More text.
        <div><a href="https://www.flexsweep.com/collections/unbreakable-push-brooms" class="buttonLink buttonShop">Shop Push Brooms →</a></div>
      </p>
    </div>
  </div>
  <!-- Attempt to add link to image -->

  <a href="www.flexsweep.com"><img src="https://cdn.shopify.com/s/files/1/2355/6001/files/BlackConnector.PushBroom.White.Smooth.jpg?765" alt="Connector" /></a>

Answer 1

IMG标签的行为很特殊，因为它们是“ block ”(具有高度和宽度)和“内联”(围绕文本 float )元素的混合。 Here's如果您想了解更多有关此主题的信息，请参阅一些有关此主题的好信息。

<a>中的图像标签在页脚处有一些额外的填充，您可以通过应用 display:block; 来消除它。到元素。还要确保没有因其他规则而应用额外的边距或填充:

a img {
  padding: 0;
  margin: 0;
  display: block;
}

这是一个demo使用一些彩色背景来显示哪个元素应用了内边距或边距。