这个轮廓是一个辅助功能（可以作为CSS主题的一部分添加，但是没有完整的代码库上下文就很难知道）。但是，删除它不是一个好主意，因为它会使视觉障碍的人的体验变差（检查http://www.outlinenone.com/）。
然而，我们能做的是使它看起来更好，您有一个<div>，其中一个<a>嵌套在一个<p>中，这就是为什么矩形没有包围整个图标，而是重叠在它上面，因为它认为它是一个内联元素（Ideally, you don't want to use block elements in p tags）.在这里，你会得到块元素，比如<div>和<p>里面的<img>）.所以我推荐的是：
1.删除<p>和<div>，并仅将其保留在<a>中
1.将display: inline-block CSS属性添加到<a>标记，结果为：

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

如果需要块元素，只需删除<p>标记：

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

如果没有完整的背景，将很难回答，但：
1.尝试设置元素display:block或display:inline-block
1.尝试将IMG宽度和高度设置为style="width:55px;height:55px"

将display: inline-block添加到<a>标记

<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>