Witam, dlaczego gdy wsadzę diva do diva i dam temu w środku margin-top:30px; to miast odpychać się od góry tego diva i ewentualnie powiększać go od dołu gdy brakuje miejsca to odpycha tego zewnętrznego diva od góry zamiast samego siebie od tego diva ( mam nadzieje że rozumiecie) jak to naprawić? tutaj prosty przykład
<!DOCTYPE html>
<html>
<head>
<title>asd</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
width: 100%;
height:100vh;
background:gray;
position: relative;
}
.klocek{
background-color: blue;
margin-top:40px;
}
</style>
</head>
<body>
<div class="container">
<div class="klocek">asd</div>
</div>
</body>
</html>