Salut tout le monde, quand j'intègre une images dans mon html et que je modifie sa position avec :margin et bien sa me met des sortes de lignes rouge autour de mon images ![], quelqu'un pourrait m'aider à remédier a ça ? Merci d'avance !
Voici un extrait de mon code HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SAW PROJECTS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p class="portfolio">PORTFOLIO</p>
<nav id="thumbs">
<a href="https://www.youtube.com/watch?v=RE_j5V7m9us"><img src="C:\Users\utilisateur\Desktop\saw\FRACTAL.png" alt></a>
<a href="https://www.youtube.com/watch?v=PRuHdBcm1AA"><img src="C:\Users\utilisateur\Desktop\saw\ERA.png" alt></a>
Et de mon CSS
@keyframes fadeToNearBlack{
to { background: #171717; }
}
@keyframes goBig { to { opacity: 1; } }
nav { display: flex;
background : #171717;}
nav a { display: block; flex: 1;
background : #171717}
nav a img, dialog img { width: 100%; height: auto;
background : #171717}
dialog { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); border: none; opacity: 0;
background : #171717}
dialog button { border: none; background: none; font-size: 1.2rem;
background : #171717 }
dialog[open] {
animation: goBig 1s .4s forwards;
width: 70%; margin: auto;
max-width: 600px;
background : #171717;
.menu-icon{
position: relative;
width: 54px;
height: 54px;
transition: transform 0.5s;
}
.menu-icon span {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 22px;
height: 2px;
background-color: #FFF;
transition: background 0.5s;
}
}
dialog[open]::backdrop { animation: fadeToNearBlack 1s forwards;
background : #171717}
.backdrop { animation: fadeToNearBlack 1s forwards;
background : #171717}
dialog img { width: 100%; height: auto;
background : #171717}
}
Alexandre Pinot