So, I have a div inside the webpage, and inside this div there are three children. If I change the margin of the first div, all the others change, but if I change one of the other child's margin, nothing happens. Any idea why this happen?
body{
background-color: black;
width: 1920px;
height: 1080px;
}
.cover{
/* width: 180px;
height: 240px; */
height: 100%;
transition: border-radius .2s;
border-radius: 30px;
}
.csel{
/* width: 240px;
height: 320px; */
height: 100%;
border-radius: 40px;
transition: all .2s;
}
.card{
display: inline-block;
width: 180px;
height: 240px;
margin-left: 120px;
margin-top: 60px;
transition: all .2s;
}
.sel{
margin-top: 40px;
margin-left: 120px;
width: 240px;
height: 320px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./stylesheet.css"/>
</head>
<body>
<div class="bar">
<div id="sel" class="card sel">
<img id="csel" class=" csel" src="https://images.igdb.com/igdb/image/upload/t_cover_big/co2e5b.png"/>
</div>
<div id="sel1" class="card">
<img id="csel" class=" csel" src="https://images.igdb.com/igdb/image/upload/t_cover_big/co2e5b.png"/>
</div>
<div id="sel1" class="card">
<img id="csel" class=" csel" src="https://images.igdb.com/igdb/image/upload/t_cover_big/co2e5b.png"/>
</div>
</div>
</body>
</html>