I'm doing a personal project, and I don't understand why it adds a small margin below the image:
* {
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Interactive</title>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<img src="https://i.ibb.co/1RB9mqx/bg-main-desktop.png" alt="">
</body>
</html>
How could I do to remove the margin below the image?
Picture of how the problem looks:
The problem comes from the vertical-align assigned by default to many elements.
You have several solutions (use the one that works best for you in your styles.css):
O well
The problem is that the image does not have enough height, you would have to increase the width so that the height adapts proportionally and if you do not mind stretching the image a little you can try this:
I hope it helps you, if so, you can mark the answer as correct :D