Forum : Problèmes d'images en HTML ET CSS

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

Problèmes d'images en HTML ET CSS

3 réponses