为什么将 <div> 更改为 <a> 会将所有内容推到其容器之外？

Question

我有这些卡片按预期显示：

<div className="card-product">   
        <div className="img-div">
          <img src={product.image} alt="prod-img" />
        </div>
        
        <div className='text-row'>
          <h4>{product.name}</h4>
          <p>${product.price}</p>
        </div> 
</div>

但是，当更改为 <a> 或 React Link 时，样式不再有效并且其内容被推到卡片之外：

<div className="card-product">   
        <Link to={`/product/${product.id}`} className="img-div">
          <img src={product.image} alt="prod-img" />
        </Link>
        
        <div className='text-row'>
          <h4>{product.name}</h4>
          <p>${product.price}</p>
        </div> 
</div>

这是CSS：

.card-product {
  .img-div {
    height: 80%;
    text-decoration: none;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .text-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 1rem;
    h4 {
      font-family: "Playfair Display", serif;
      font-weight: normal;
    }
    p {
      font-family: "Lato", sans-serif;
      font-size: 0.9rem;
    }
  }
}

为什么会这样？

Answer 1

这是因为 <div> 标签有自己的预定义样式，<a> 标签或 <Link> 标签中没有。所以你可以做的是在 <div> 中使用 <a>。像这样。

<div className="img-div">>
 <a href={`/product/${product.id}`}>
  <img src={product.image} alt="prod-img" />
 </a>
<div>

Answer 2

在 <div> 标签内使用 <a> 标签。像这样。

<a href={`/product/${product.id}`}>
  <img src={product.image} alt="prod-img" />
</a>

为什么将 <div> 更改为 <a> 会将所有内容推到其容器之外？

Why does changing a <div> for an <a> pushes everything outside its container?

css

styling