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

Question

Alexa_Smol @Alexa_Smol

HTML
CSS

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="stiyle.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&family=Tinos:wght@400;700&display=swap" rel="stylesheet">
    <title>Restic</title>
</head>
<body>
    
    <div class="header">
        <div class="container">
            <div class="header-line">
                <div class="header-logo">
                <img src="logo.png" alt="">
                </div>
                
                <div class="nav">
                    <a class="nav-item" href="@">ГЛАВНАЯ</a>
                    <a class="nav-item" href="@">МЕНЮ</a>
                    <a class="nav-item" href="@">О НАС</a>
                    <a class="nav-item" href="@">БРОНЬ</a>
                </div>

                <div class="cart">
                    <a href="#">
                        <img class="cart-img" src="cart.png" alt="">
                    </a>
                </div>
                
                <div class="phone">
                    <div class="phone-holder">
                    <div class="phone-img">
                        <img src="phone.png" alt="">
                        </div>
                        <div class="number"><a class="num" href = #>
                            +7-914-805-18-64</a></div>
                    </div>

                    <div class="phone-text"> Свяжитесь с нами для <br> бронирования
                    </div>
                </div>

                <div class="btn">
                    <a class="button" href="#">ЗАКАЗ СТОЛИКА</a>
                </div>
            </div>

            <div class="header-down">
                <div class="header-title">
                    Добро пожаловать в

                    <div class="header-subtitle">
                        Наш ресторан
                    </div>

                    <div class="header-suptitle">
                        ДОМ ЛУЧШЕЙ ЕДЫ
                    </div>

                    <div class="bth">
                        <a href="#" class="header-button">VIEW MENU</a>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="cards">
        <div class="container">
            <div class="cards-holder">
        <div class="card">

                    <div class="card-image">
                        <img class="card-img" src="card.png">
                    </div>

                    <div class="card-title">
                        Магическая <span>Атмосфера</span>
                    </div>

                    <div class="card-desc">
                        В нашем заведении царит магическая атмосфера
                        наполненная вкусными ароматами
                    </div>

                </div>

                <div class="card">

                    <div class="card-image">
                        <img class="card-img" src="card.png">
                    </div>

                    <div class="card-title">
                        Лучшее качество <span>Еды</span>
                    </div>

                    <div class="card-desc">
                        Качество нашей 
                        Еды - отменное!

                    </div>

                </div>

                <div class="card">

                    <div class="card-image">
                        <img class="card-img" src="card.png">
                    </div>

                    <div class="card-title">
                        Недорогая <span> Еда</span>
                    </div>

                    <div class="card-desc">
                        Стоимость нашей Еды
                        зависит только от ее
                        количества. Качество
                        всегда на высоте!
                    </div>

            </div>
        </div>
        </div>
</div>

<div class="history">
    <div class="container">
        <div class="history-holder">
            <div class="history-info">
                <div class="history-title">
                    Наша <span>История</span>

                </div>

                <div class="history-desc">
                    Как и у любого другого самобытного места, у нас есть своя, 
                    особая история. Идея ресторана пришла основателям неожиданно. 
                    Во время прогулки по лесу создатель нашего ресторана застрял в 
                    сотнях километров от ближайшего населенного пункта. Вдали от 
                    цивилизации и связи им пришлось навремя обустровать себе нехитрый 
                    быт, добывать и готовить себе еду.
                </div>

                <div class="history-number">
                    <div class="number-item">
                        93 <span>Напитки</span>
                    </div>

                    <div class="number-item">
                        206 <span>Еда</span>
                    </div>

                    <div class="number-item">
                        71 <span>Закуски</span>
                    </div>
                </div>
            </div>

            <div class="history-imgages">

                <img class="imgages-1" src="1.jpg" alt="">
                <img class="imgages-2" src="2.jpg" alt="">
                <img class="imgages-3" src="3.jpg" alt="">

            </div>
    </div>
</div>

<div class="black-block">

    <div class="container">

        <div class="left">
            <div class="left-title">
                Отпразднуйте в одном из самых лучших ресторанов.
            </div>
            <div class="left-text">
                Только в этом месяце бизнес-ланч от 250 ₽
            </div>
        </div>


        <div class="right">
            <div class="right-button">
                <a href="#" class="right-btn">ЗАКАЗ СТОЛИКА</a>
            </div>
        </div>

    </div>

</div>

</body>
</html>

Вопрос задан более года назад
205 просмотров

10 комментариев

Подписаться 3 Простой 10 комментариев

Sand @sand3001

Почитайте пункт 3.8 правил

Написано более года назад
Вадим @MrDecoy Куратор тега CSS

Ну вон там на скрине же всё видно, что за вопрос..
750ый пиксель сверху и 915 слева.

Ладно, это Ваш первый вопрос...
как Вы предлагаете инеспектировать почему? Мы тут не гадаем по картинкам.
Выкладывайте код кодом и либо ссылку на сайт где можно это проверить, либо песочницу на codepen.

Давать скрин только той области, на которой проявляется проблема - не очень эффективно. В вёрстке стили далеко за пределами "проблемной" секции могут оказывать на неё влияние.

Написано более года назад
Alexa_Smol @Alexa_Smol Автор вопроса

body {
margin: 0;
font-family: 'Open Sans', sans-serif;
}

.container {
margin: 0px 166px;
}

.header {
background-image: url(bg.png);
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}

.header-line {
padding-top: 50px;
display: flex;
align-items: center;
justify-content: space-around;
}

.nav-item {
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 14px;

margin-right: 25px;

transition: color 0.3s linear;
}

.nav-item:hover {
color: rgb(255, 3, 3);

}
.cart {
position: relative;
border-right: 1px solid #FFFFFF;
padding-right: 10px;
height: 50px;
}

.cart-img {
position: absolute;
top: 18px;
right: 7px;
}

.num {
color:#fff;
text-decoration: none;
font-weight: 700;
transition: color 0.3s linear;
}

.num:hover {
color: rgb(255, 3, 3);
}

.phone-text {
font-size: 14px;
font-weight: 400;
color: #fff;
}

.phone-holder {
display: flex;
align-items: center;
}

.button {
background-color: #FF7400;
color: #fff;
text-decoration: none;
padding: 14px 18px;
font-weight: 700;
transition: background-color 0.2s linear;
}

.button:hover {
background-color: #a04b06;
}

.header-down {
position: relative;
}

.header-title {
color: #D67E35;
font-family: 'Open Sans', sans-serif;
font-family: 'Tinos', serif;
font-size: 50px;
font-weight: 400;
text-align: center;
position: absolute;
left: 0;
margin-top: 222px;
margin-bottom: 12px;
}

.header-suptitle {
color: #fff;
font-size:18px;
font-family: 'Open Sans', sans-serif;
}

.header-suptitle::after {
position: absolute;
content: " ";
height: 2px;
width: 61px;
background-color:#fff;
top: 127px;
left: 56px;
}

.header-suptitle::before {
position: absolute;
content: " ";
height: 2px;
width: 61px;
background-color:#fff;
top: 127px;
left: 308px;
}

.header-button {
background-color: #FF7400;
padding: 14px 28px;
color: #fff;
font-size: 14px;
font-weight: 700;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
transition: background-color 0.3s linear
}

.header-button:hover {
background-color: #a84f07;
}

.cards-holder {
display: flex;
justify-content: center;
}
.card {
box-shadow: 10px 10px 40px 20px #0000001A;
width: 349px;
margin-right: 31px;
background-color: #fff;
margin-top: -80px;
padding: 10px 10px;
}

.card-image {
display: flex;
justify-content: center;
padding-top: 31px;
}

.card-title {
display: flex;
justify-content: center;
margin-bottom: 20px;
font-family: 'Tinos', serif;
font-size: 26px;
font-weight: 400;
}

.card-title span{
color: #D67E35;
}

.card-desc {
text-align: center;
font-family: 'Tinos', serif;
font-size: 26px;
font-weight: 400;
color: #656363;
}

.history{
margin-top: 166px;
padding-bottom: 200px;
}

.history-title{
font-family: 'Tinos', serif;
font-size: 54px;
font-weight: 400;
width: 444px;
text-align: center;
margin-top: 21px;
}

.history-title span{
color: #D67E34;
}

.history-desc{
color: #656363;
font-size: 16px;
width: 444px;
text-align: center;
}

.history-number {
display: flex;
width: 444px;
justify-content: center;
margin-top: 40px;
margin-left: 30px;
}

.number-item {
margin-right: 60px;
text-align: center;
font-size: 40px;
color: #BC9060;
}

.number-item span {
display: block;
color: #000;
font-size: 20px;
}

.history-imgages {
position: relative;

}

.history-holder {
display: flex;
justify-content: space-between;
}

.imgages-1 {
position: absolute;
z-index: 4;
top: 50px;
left: -550px;
width: 232px;
/* height: 299px; */
transition: transform 0.3s ease;

}

.imgages-2 {
position: absolute;
z-index: 2;
top: -15px;
left: -360px;
width: 255px;
/* height: 429px; */
transition: transform 0.3s ease;

}

.imgages-3 {
position: absolute;
z-index: 3;
top: 180px;
left: -265px;
width: 254px;
/* height: 300px; */
transition: transform 0.3s ease;

}

.black-block{
padding-top: 200px;
background-image: url(black-bg.jpg);
}

Написано более года назад
Вадим @MrDecoy Куратор тега CSS

Alexa_Smol, отлично, код Вы добавили. Осталось теперь указать где именно по вашему не работает padding

Написано более года назад
Alexa_Smol @Alexa_Smol Автор вопроса
В этом месте:

.history{ margin-top: 166px; padding-bottom: 200px; }
Написано более года назад
Вадим @MrDecoy Куратор тега CSS

Alexa_Smol, Всё работает.

Написано более года назад
Вадим @MrDecoy Куратор тега CSS

Alexa_Smol,

Написано более года назад
Alexa_Smol @Alexa_Smol Автор вопроса

Вадим, нет, должен быть отступ от блока history, но его нет

Написано более года назад
Alexa_Smol @Alexa_Smol Автор вопроса

Вадим, Всё, я поняла в чём дело. Спасибо большое!

Написано более года назад
Вадим @MrDecoy Куратор тега CSS

Alexa_Smol, Я выше дал Вам скриншот что padding снизу у history есть.

Вы же не хотите сделать демку самостоятельно, где будет воспроизведена проблема.

Заказ столика у вас внутри history лежит, если что. А под ним белая область - как раз паддинг снизу от хистори.

Написано более года назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

CSS

+1 ещё

Простой
Почему не работает анимация при маленьком окне?
- 1 подписчик
- 12 часов назад
- 32 просмотра
0

ответов
HTML

+1 ещё

Простой
Как сделать чтобы в МиниВК приложении ссылки открывались внутри?
- 1 подписчик
- 22 часа назад
- 19 просмотров
0

ответов
HTML

+3 ещё

Простой
Почему появляется горизонтальная прокрутка на мобильном (overflow включен)?
- 1 подписчик
- вчера
- 69 просмотров
1

ответ
HTML

+3 ещё

Простой
Где и как найти переменные локальной игры на html5?
- 1 подписчик
- 25 нояб.
- 80 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему дублируются изображения?
- 1 подписчик
- 25 нояб.
- 77 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 24 нояб.
- 229 просмотров
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 23 нояб.
- 111 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 23 нояб.
- 115 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 121 просмотр
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 85 просмотров
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Создать многостраничный дизайн WEB-приложения (сайта) в бьюти-сфере

27 нояб. 2024, в 22:29

50000 руб./за проект

Разработать приложение для Android и IOS

27 нояб. 2024, в 21:14

70000 руб./за проект

Разработка чат-бота JS + API интеграции

27 нояб. 2024, в 21:08

45000 руб./за проект

Ну вон там на скрине же всё видно, что за вопрос..
750ый пиксель сверху и 915 слева.

Ладно, это Ваш первый вопрос...
как Вы предлагаете инеспектировать почему? Мы тут не гадаем по картинкам.
Выкладывайте код кодом и либо ссылку на сайт где можно это проверить, либо песочницу на codepen.

Давать скрин только той области, на которой проявляется проблема - не очень эффективно. В вёрстке стили далеко за пределами "проблемной" секции могут оказывать на неё влияние.
Alexa_Smol, отлично, код Вы добавили. Осталось теперь указать где именно по вашему не работает padding
В этом месте:

.history{ margin-top: 166px; padding-bottom: 200px; }
Вадим, нет, должен быть отступ от блока history, но его нет
Вадим, Всё, я поняла в чём дело. Спасибо большое!
Alexa_Smol, Я выше дал Вам скриншот что padding снизу у history есть.

Вы же не хотите сделать демку самостоятельно, где будет воспроизведена проблема.

Заказ столика у вас внутри history лежит, если что. А под ним белая область - как раз паддинг снизу от хистори.

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт