Как задать верхний отступ?

Question

[fleshik]

Подскажите почему когда задаю отступ сверху красному блоку зеленый тоже отступает от синего? С чем это связано и как сделать чтоб отступал от верха только красный блок, а между синим и зеленым расстояние оставалось 20px

<div class="wrapper">
        <div class="a1"></div>
        <div class="a2"></div>
        <div class="a3"></div>
        <div class="a4"></div>
 </div>

.wrapper{
            width: 400px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
            background-color: antiquewhite;
        }
        
        .a1{
            width: 150px;
            height: 150px;
            background-color:blue;
        }
        
        .a2{
            margin-top: 50px;
            width: 150px;
            height: 150px;
            background-color:red;
        }
        .a3{
            width: 150px;
            height: 150px;
            background-color:green;
        }
        .a4{
            
            width: 150px;
            height: 150px;
            background-color:black;
        }

Answer 1

[Геннадий]

Подскажите почему когда задаю отступ сверху красному блоку зеленый тоже отступает от синего?

У вас не зеленый отступает, а весь ряд нижних блоков опускается на величину указанную в margin-top для a2. 50px в margin-top + 20px в gap. Вот у вас уже 70 px между верхним и нижним рядом.

С чем это связано?

Так работает flexbox.

Как сделать чтоб отступал от верха только красный блок, а между синим и зеленым расстояние оставалось 20px?

Использовать transform для элемента где нужен отступ.

.a2{
    transform: translateY(50px);
    width: 150px;
    height: 150px;
    background-color:red;
}

Comments

[fleshik]

тогда красный наезжает на черный

[Геннадий]

fleshik, вы получили то, что спрашивали в вопросе...

Как сделать чтоб отступал от верха только красный блок, а между синим и зеленым расстояние оставалось 20px

1. Между синим и зеленым отступ остался 20px
2. Красный элемент получил отступ без сдвига остальных.

Если нужно, чтоб черный тоже сохранил отступ от красного, тогда добавьте margin-top черному.

[fleshik]

Геннадий, но почему все таки появляется этот отступ между синим и зеленым ведь задается только top красному с чем такое поведение связано?

[Геннадий]

fleshik, потому-что вы сместили красный элемент на 50px вниз через margin-top и для всех элементов добавили пространство в gap: 20px между ними. Получается, что от нижнего края красного образовалось пространство в 20px, после которого уже выстраиваются остальные элементы.

[fleshik]

Геннадий, c gap мне все понятно если допустим что gap вообще не задан то, я не пойму почему top 50 px для красного влияют на расстояние между синим и зеленым зеленому мы ведь не задаем отступ сверху 50px от синего, но он почему то появляется

[Геннадий]

fleshik, я не знаю как вам доступней еще объяснить... Могу только порекомендовать более подробно ознакомиться с flexbox. В интернете полно статей по нему.

[leeroyjenkins176]

fleshik,
Отступ у красного блока увеличивает высоту первого ряда в котором содержатся элементы.