htmlを使用して別のページにリダイレクトするために別のイメージのイメージを調整するにはどうすればよいですか？

Question

私は4つのイメージを含むページを構築しようとしています。絶対的なものがあり、他の3つのそれぞれが相対的であり、別のページにリダイレクトされます。問題は、私は必要な位置にimgを調整するために左と上のパディングを使用しましたが、添付されたスクリーンショットのようにこのパディングの任意の場所を押すページにリダイレクトできる主な問題があります。 私は本当にこのスペースのすべてではなく、別のページにリダイレクトできるimgのみを作りたいと思っています。

。

私はこのコード

<div> 
    <img src="./assets/Images/Rectangle 1.png" style="position: absolute;" alt="Main Design" width="100%"> 
    <a href="https://www.w3schools.com"> 
    <img src="./assets/Images/Account.png" style="position: relative; padding-left: 180px; padding-top: 220px;" alt="Accounts Management"> 
    </a> 
    <a href="https://www.w3schools.com"> 
    <img src="./assets/Images/Bus.png" style="position: relative; padding-left: 150px; padding-top: 220px;" alt="Bus Management"> 
    </a> 
    <a href="https://www.w3schools.com"> 
    <img src="./assets/Images/Line.png" style="position: relative; padding-left: 150px; padding-top: 220px;" alt="Line Management"> 
    </a> 

これを解決する方法のための任意の勧告を書きましたか？

Answer 1

アンカー要素に余白プロパティを使用してみましたか？

私はマージン（上端、左端、右端、下端）を使用して正しい位置に移動したり、おそらく他のプロパティを使うことができると思います。このように、アンカー要素の唯一のコンテンツはパディングスペース。

のようなもの：

<div> 
    <img src="./assets/Images/Rectangle 1.png" style="position: absolute;" alt="Main Design" width="100%"> 
    <a href="https://www.w3schools.com" style="position: relative; margin-left: 180px; margin-top: 220px;"> 
    <img src="./assets/Images/Account.png" style="position: relative;" alt="Accounts Management"> 
    </a> 
    <a href="https://www.w3schools.com" style="position: relative; margin-left: 150px; margin-top: 220px;"> 
    <img src="./assets/Images/Bus.png" style="position: relative; " alt="Bus Management"> 
    </a> 
    <a href="https://www.w3schools.com" style="position: relative; margin-left: 150px; margin-top: 220px;"> 
    <img src="./assets/Images/Line.png" style="position: relative;" alt="Line Management"> 
    </a> 
</div>