Не срабатывает margin-top

Question

Ответы искал, как мне сделать отступ без всяких border и т.п. Можно ли так вообще?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <p>Airliner</p>
    </header>
</body>
</html>
<script src="js/main.js"></script>

* {
    margin: 0;
}

header {
    width: 100%;
    height: 1000px;
    background-color: #04002B;
}

p {
    color: white;

    margin-top: 50px;
}

Answer 1

действительно странное поведение

как я его обошел:

вариант 1:

прозрачная граница и стиль чтоб граница не влияла на размеры блоков:

header {
    width: 100%;
    height: 1000px;
    background-color: #04002B;
    
    box-sizing: border-box; 
    border: 1px solid rgba(0, 0, 0, 0);
}

вариант 2:

добавляем в header еще один блок, в котором не видим текст

header {
    width: 100%;
    height: 1000px;
    background-color: #04002B;
}

header > span {
    font-size: 0px;
}

p {
    color: white;

    margin-top: 50px;
}

</style>

    <header><span>X</span>
        <p>Airliner</p>
    </header>

вариант 3:

добавляем в p стиль position: absolute;

p {
    position: absolute;
    color: white;

    margin-top: 50px;
}

недостаток - этот блок выпадает из очереди и не влияет уже на остальные блоки в header

ВАРИАНТ 4 (ОКОНЧАТЕЛЬНЫЙ):

блок p имеет свойство display: inline (как span и прочий мусор), чтобы все было хорошо ему нужно свойство display: inline-block:

p {
    display: inline-block;
    
    color: white;

    margin-top: 50px;
}

БЛОГ НА HUSL

Не срабатывает margin-top

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