Нужно сделать отступ сверху заблюренного блока,который расположен на картинке в виде лица,как на фото
Когда пытаюсь это сделать через margin,то он работает влево и вправо,сверху и снизу не работает
Пример HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="face-image">
<div class="blurred-block"></div>
</div>
</body>
</html>
Пример CSS
.face-image{
width: 268px;
height: 206px;
background: url(img/face.png);
margin: 20px 0 0 0;
}
.blurred-block{
display: flex;
width: 100px;
height: 48px;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
border-radius: 8px;
margin: 10px 0 0 152px;
}