How to draw the border of an image as a link

Question

How to draw the border of an image as a link

Hi, I know it sounds like a silly problem, but I've tried everything and searched everything! I can't get that border out of my image.

body {
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    
}
a img {
    border: none;
    outline: none;
}
a {
    border: none;
    outline: none;
}
header{
    height: 60px;
    width: 100%;
    background-color: black;
}
.logo {
    background: url(https://img.icons8.com/) no-repeat;
    position: relative;
    top: 5px;
    left: 5px;
    border: none;
    outline: none;
    width: 100px;
    height: 50px;
}

<html lang="pt">

<head>
    <title>Teste</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <header class="header">
        <div class="logo-radical"><a href="#">
            <img class="logo"></a></div>
    </header>
</body>

</html>

2

html css imagem css-border

Author: Wingeds, 2019-07-16

Source

2 answers

Needs to remove the border from the link (a) and not from the image (img), so the correct selector would be:

a {
  border: none;
  outline: none;
 }

a {
   outline : none;
   border: none
 }

<a href="#">
  <img src="https://img.icons8.com/officel/80/000000/download-2.png">
</a>

1

Author: Ricardo Pontual, 2019-07-16 20:54:15

score 0 · Accepted Answer

boy your problem is so obvious that I hardly saw RSS

Vc is putting a background-imagem in the <img> tag, so despite the image rendering, the browser user-agente creates this border that would be the total size of the <img> tag.

The image is an external element, in a way embedded in the code, the content that renders inside the image is not in the HTML, the tag <img> is a container that will receive and render the external image, in addition it is not allowed other elements within the <img> tag, and so, just like the <input> tag the <img> tag has no closing tag </img> these elements are known as void elements https://html.spec.whatwg.org/multipage/syntax.html#void-elements

If you want to use a background-image, don't put it directly in the <img> tag, put it in a <span> tag for example, that tb is an element inline just like the image.

Or attribute SRC specifies the URI for the image to be embedded. Its syntax is the same as the HREF attribute of the <A> tag. SRC is required.

source: https://www.w3.org/MarkUp/html3/img.html

The image you want to call in the <img> tag should always be declared by the src="" attribute in the HTML itself, and not in the CSS with the background-image property. Also, the src="" attribute is required in the <img> tag and should not be omitted in favor of a background-image