th a img の構造で height が狙い通りにならない

Question

ご回答よろしくお願いいたします！

前提・実現したいこと

・比較サイトに挿入する table の行の高さをスリムにしたい

発生している問題・エラーメッセージ

・下記サイトの添付コード部分にて、【img 要素の下側で a 要素が大きさを保有しており、この大きさを 0 にできない】（高さを持つ要素を img 要素だけにしたい
https://kangoshi-tensyoku.bookstone.jp/lp/212/

該当のソースコード

<tbody class="rank-table__tbody">
  <tr>
    <th>
      <a href="https://t.afi-b.com/visit.php?guid=ON&a=448189-B387434e&p=e8016605" rel="nofollow">
        <img src="https://www.afi-b.com/upload_image/4818-1588716784-3.jpg">
        <img src="https://t.afi-b.com/lead/448189/e8016605/B387434e" width="1" height="1" style="border:none;">
      </a>
    </th>
    <td>

試したこと

・th, th, a のそれぞれに height:60px; を設定した

Comments

[m.ts10806]

htmlだけでは再現できませんので一通りご提示ください。

Answer 1

こんにちは。

img 要素の下側で a 要素が大きさを保有しており、この大きさを 0 にできない

heightを適用させるためには、インラインであってはいけないです。

適用対象 非置換インライン要素、テーブルの列、列グループを除くすべての要素

height - CSS: カスケーディングスタイルシート | MDN

a {
	height: 0;
	display: block;
}

なお、セレクタは適切につけ直してください。

Comments

[Shintaro98]

ありがとうございます。要素の理解が不足しておりました