Как сделать отступ сверху элемента?

Question

Нужно сделать отступ сверху заблюренного блока,который расположен на картинке в виде лица,как на фото Когда пытаюсь это сделать через 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;
}

Answer 1

Избежать наезжания на родительский элемент можно дав ему стиль overflow: hidden;, padding-top:1px;, или border-top:1px solid transparent;
Именно в вашей ситуации думаю лучшим решением будет overflow, так как padding и border дают ненужный отступ, который придётся нивелировать marginом например.

.face-image{
    width: 268px;
    height: 206px;
    background: url(img/face.png);
    margin: 20px 0 0 0;
    background: green;
    overflow: hidden;
}

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

<body>
    <div class="face-image">
        <div class="blurred-block"></div>
    </div>
</body>

Answer 2

У вас в примере классическое схлопывание margin родительского и дочернего элементов. Причина такого поведения обусловлена историческими аспектами.

Как сказал выше Евгений его можно пресечь, задав border или padding, отличные от нуля. Либо задать у родительского элемента overflow любое значение, отличное от дефолтного, например, auto. Либо установить свойство display в inline-block, что так же исключит создание излишних отступов:

.face-image{ 
 width: 268px; 
 height: 206px; 
 background: url(img/face.png); 
 margin: 20px 0 0 0; 
 display: inline-block; 
} 
 
.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; 
}

Пример для поиграться

Есть и другие, более экзотеские способы, описанные в соответствующей ветке англоязычного so

БЛОГ НА HUSL

Как сделать отступ сверху элемента?

Ответы (2 шт):