There are three payment system icons on the web page:

enter image description here

with this code:

html:

<div class="paicons"> <a href="#" title="mastercard"><img src="master.png"></a> <a href="#" title="Visa"><img src="visa.png"></a> <a href="#" title="PayPal"><img src="pal.jpg"></a> </div>

css:

 .paicons { padding: 1em; float: right; margin-top: -10em; margin-right: 28em; }

At the same time, when you hover over images, not the whole area is a link, but only about half, this is what the browser shows:

enter image description here

I tried to set the width and height of the element "a" in the css inside the "div" but it did not work. How to make each link exactly fit the image? Thank!

    2 answers 2

     div { height: 6em; background: antiquewhite; text-align: center; } div::before { content: ""; display: inline-block; vertical-align: middle; height: 100%; } a { display: inline-block; vertical-align: middle; } img { display: inline-block; vertical-align: top; } 
     <div class="paicons"><!-- здесь нет пробела между тегами --><a href="#" title="mastercard"><img src="https://placeholdit.imgix.net/~text?txtsize=16&txt=MasterCard&w=100&h=50"></a> <a href="#" title="Visa"><img src="https://placeholdit.imgix.net/~text?txtsize=16&txt=Visa&w=100&h=50"></a> <a href="#" title="PayPal"><img src="https://placeholdit.imgix.net/~text?txtsize=16&txt=PayPal&w=100&h=50"></a> </div> 

       .paicons a{ display:inline-block}

      try