1

Нужно сделать отступ сверху заблюренного блока,который расположен на картинке в виде лица,как на фото Когда пытаюсь это сделать через 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;
}
4
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 26 фев в 19:28
  • 3
  • 3
    Уберите свои скриншоты и добавьте нормально код
    – InDevX
    26 фев в 19:33
  • Изменил фото кода на текст
    – Sywuxy
    26 фев в 19:38

2 ответа 2

1

У вас в примере классическое схлопывание 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

1
  • Спасибо огромное
    – Sywuxy
    27 фев в 10:26
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>

2
  • Постарайтесь делать ваши ответы более развёрнутыми и добавлять в них больше объяснения. Подробнее в справке. Ответ можно отредактировать кнопкой «править».
    – ΝNL993
    27 фев в 6:55
  • Очень вам благодарен
    – Sywuxy
    27 фев в 10:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.