Неровная ссылка после картинки

Question

Ссылка ниже чем должна быть.

body{
    background-color:=#C6E2FF;
    background-image:radial-gradient(#FFFFFF,#C6E2FF);
}
.link{
    color:white;
    background-color: red;
    border: 1px solid black;
    padding: 5px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 20px;
    box-shadow: 0px 1px 1px black;
    margin-top: -10px;
    
}
footer{
    margin-top:5px;
}
.link:hover{
    box-shadow: 0px 2px 5px black;
    transform: scale(1.01);
    transition: 0.25s
}
img{
    display: inline;
    
   
}
nav{
    display: inline;
    
    
}
main{
 margin-top: 10px;
}

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>TEST</title>
    <link rel="stylesheet" href="test1.css">
</head>
<body>
    <header>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" width=40px>
     <nav>
         <a class="link" href="https://www.youtube.com">Youtube</a>
     </nav> 
    </header>
    
    <main>
        
        MAIN
    </main>
    <footer>footer</footer>
</body>
</html>

Answer 1

header{
  display:flex;  
}
nav{
    align-self:center; // выравнивание по вертикали относительно родителя header
}

body{
    background-color:=#C6E2FF;
    background-image:radial-gradient(#FFFFFF,#C6E2FF);
}
.link{
    color:white;
    background-color: red;
    border: 1px solid black;
    padding: 5px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 20px;
    box-shadow: 0px 1px 1px black;
    margin-top: -10px;
    
}
footer{
    margin-top:5px;
}
.link:hover{
    box-shadow: 0px 2px 5px black;
    transform: scale(1.01);
    transition: 0.25s
}
header{
  display:flex;  
}
nav{
    align-self:center;
}
main{
 margin-top: 10px;
}

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>TEST</title>
    <link rel="stylesheet" href="test1.css">
</head>
<body>
    <header>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" width=40px>
     <nav>
         <a class="link" href="https://www.youtube.com">Youtube</a>
     </nav> 
    </header>
    
    <main>
        
        MAIN
    </main>
    <footer>footer</footer>
</body>
</html>

БЛОГ НА HUSL

Неровная ссылка после картинки

Ответы (1 шт):