Jejari sempadan tidak berfungsi untuk img di dalam titik sauh

Question

Saya menggunakan kod HTML berikut:

<a class="-video-detail-qualifiers-branding">
    <img src=""/>
</a>

Kod SCSS:

.-video-detail-qualifiers-branding {
  border: 2px solid #D7C378;
  border-radius: 4px;

  img {
    height: 85px;
    width: 85px;
    padding: 5px;
  }

  img::after {
    border-radius: 4px;
  }
}

Masalah: Kod di atas menggunakan jejari sempadan pada tag anchor, tetapi bukan pada tag img. Saya mahu jejari sempadan kedua-dua elemen ini ialah 4px.

Answer 1

.-video-detail-qualifiers-branding {
  border: 2px solid #D7C378;
  padding: 5px;
  display: inline-block;
  border-radius: 4px;

  img {
    display: block;
    height: 85px;
    width: 85px;
    border-radius: 4px;
  }
}

Jika anda menambah daripada <img> 中删除填充，并将其添加到 <a> 中，并将 display: block; kepada kedua-duanya, anda dapat melihat bahawa jejari sempadan berfungsi untuk kedua-dua teg.