i decided to make redirects with images but i have small problem.

Look at this screen: https://i.stack.imgur.com/eEnNB.png

This is this item:

<p><div><a title="Home" href="/home"><img src="/icons/home.svg" width="55" height="55" /></a></div></p>

It shows strange rectangle, i dont want to show it. Do you have any ideas?

CodePudding user response：

That outline is an accessibility feature (Which might be added as part of a CSS theme, but hard to know without the full context of the codebase). However, removing it is not a good idea, as it will worsen the experience for people with visibility impairment (Check http://www.outlinenone.com/).

What we can do, however, is make it look better. You have a <div> with a <a> nested in a <p>, it being the reason for the rectangle not encasing the whole icon and instead overlapping on top of it, as it believes it to be an inline element (Ideally, you don't want to use block elements in p tags). Here, you're getting block elements, such as a <div> and an <img> inside of the <p>). So what I recommend is:

1. Remove <p> and <div>, and leave it only wrapped in the <a>
2. Add the display: inline-block CSS property to the <a> tag, resulting in:

    <a style="display:inline-block;" title="Home" href="/home">
      <img src="/icons/home.svg" width="55" height="55" />
    </a>

If you want a block element, simply remove the <p> tag:

    <div>
        <a title="Home" href="/home">
          <img src="/icons/home.svg" width="55" height="55" />
        </a>
    </div>

CodePudding user response：

Without full context it will be difficult to answer but:

1. Try to set a element display:block or display:inline-block
2. Try to set IMG width and height as style="width:55px;height:55px"

CodePudding user response：

Add display: inline-block to the <a> tag

<p>
<div>
<a style="display:inline-block" title="Home" href="/home">
<img src="https://media.istockphoto.com/id/1357549139/photo/shot-of-an-adorable-baby-boy-wearing-a-hoody-towel.webp?s=612x612&w=is&k=20&c=MvuPLKqQhs7f6ZIsPf8oTgw08OiCvmmjJNeNdL0FG4M=" width="55" height="55" />
</a>
</div>
</p>