Почему неверно работает сво-во padding?

Question

Есть вот такой фрагмент макета:

Пытаюсь реализовать шапку; собственно, код:

body {
    font-size: 16px;
}

.clearfix {
    clear: both;
}

.contant_wrapper {
    margin: 0px 141px 0 143px;
}

.header_wrapper {
    margin-bottom: 57px;
}

.hat {
    padding: 24px 26px 21px 0px;
}

.logo {
    float: left;
}

.logo_picture {
    display: inline-block;
    width: 44px;
    height: 44px;
    background-color: #5094f2;
    border-radius: 50%;
    position: relative;
    margin-right: 15px;
}

.logo_picture span {
    display: inline-block;
    width: 21px;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 4.01875rem;
    letter-spacing: 0.64px;
    color: #fff;
    position: absolute;
    left: 8px;
    top: 4px;
}

.logo_text {
    display: inline-block;
    vertical-align: top;
    margin-top: 6px;
}

.logo_text span {
    display: inline-block;
    font-family: "Myriad Pro";
    font-weight: 400;
    font-style: normal;
    font-size: 2.544rem;
    letter-spacing: 0.42px;
    color: #000;
    line-height: 0.761;
}

.menu {
    float: right;
    margin-top: 13px;
}

.menu li {
    display: inline-block;
}

.margin_right {
    margin-right: 30px;
}

.menu li a {
    text-decoration: none;
    font-family: Myriad Pro;
    font-size: 1.26875;
    font-weight: normal;
    font-style: normal;
    line-height: 0.7;
    letter-spacing: 0.2px;
    color: #6c6c6c;
}

.face {
    height: 100vh;
}

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prechu</title>
    <link rel="stylesheet" href="./style/css/reset.css">
    <link rel="stylesheet" href="./style/css/fonts.css">
    <link rel="stylesheet" href="./style/css/main.css">
</head>

<body>
    <div class="header_wrapper">
        <header>
            <div class="contant_wrapper">
                <section class="hat" aria-label="Шапка">
                    <div class="logo">
                        <div class="logo_picture"><span>“</span></div>
                        <div class="logo_text"><span>Prechu</span></div>
                    </div>
                    <nav class="menu">
                        <ul>
                            <li class="margin_right"><a href="#">Home</a></li>
                            <li class="margin_right"><a href="#">Products</a></li>
                            <li class="margin_right"><a href="#">Service</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </nav>
                </section>
            </div>
            <div class="clearfix"></div>
            <div class="face">
                <div class="contant_wrapper">contant</div>
            </div>
        </header>
    </div>

    <main>
    </main>
    <footer></footer>
</body>

</html>

И в шапке почему-то не реализовывается заданный padding в классе hat:

И при наведении на этот класс в инструментах разработчика выдаёт это:

Контент блока почему-то выпадает за padding. Почему так происходит?

Проблему я решил тем, что классу добавил фиксированную высоту шапки, которая была в макете, но я с таким сталкиваюсь впервые, хоть и новичок; до этого при реализации блоков у меня получалось реализовывать высоту блока с помощью контента и падингов, без задавания св-ва height вручную.

Я понимаю, что к моему коду и по другим вопросам можно придраться, но просьба обратить внимание именно на эти паддинги. Есть ли возможность реализовать их здесь так, чтобы не задавать вручную высоту "шапки"?

Спасибо за помощь!

БЛОГ НА HUSL

Почему неверно работает сво-во padding?

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