Почему не работает 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>

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

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 лежит, если что. А под ним белая область - как раз паддинг снизу от хистори.

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

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

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

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

Войти через центр авторизации

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

JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 1 подписчик
- 9 часов назад
- 42 просмотра
2

ответа
CSS

Простой
Как сделать плавную анимацию изображения при наведении/убирании курсора мыши?
- 1 подписчик
- 15 часов назад
- 88 просмотров
2

ответа
CSS

Простой
Как сделать, чтобы блоки занимали половину доступной ширины, а последний нечётный — всю?
- 1 подписчик
- 18 часов назад
- 105 просмотров
4

ответа
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- вчера
- 77 просмотров
0

ответов
HTML

+3 ещё

Простой
Flask вывод изображения из базы данных?
- 1 подписчик
- вчера
- 69 просмотров
1

ответ
CSS

Простой
Как задать универсальный @keyframes для нескольких разных блоков, без скриптов?
- 1 подписчик
- вчера
- 70 просмотров
1

ответ
JavaScript

+4 ещё

Простой
Почему при загрузке страницы происходит быстрый скролл вниз, а затем вверх?
- 1 подписчик
- вчера
- 86 просмотров
1

ответ
CSS

Простой
Как в CSS повернуть горизонтальный сайт на 90° чтобы на смартофне можно было горизонтально смотреть?
- 4 подписчика
- вчера
- 1076 просмотров
2

ответа
JavaScript

+3 ещё

Средний
Swiper js, как сделать чтобы при фокусе по табу на ссылке внутри слайда не исчезала пагинация?
- 1 подписчик
- 30 апр.
- 45 просмотров
0

ответов
CSS

Простой
Как применить свойство к псевдоэлементу?
- 3 подписчика
- 29 апр.
- 231 просмотр
2

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

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Разработать нейросеть

02 мая 2024, в 06:11

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

Автоматизация отчетности сектора подбора и развития персонала в 1С

02 мая 2024, в 05:49

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

Изменение темы сайта на ghost cms

02 мая 2024, в 04:47

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

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

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

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

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

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

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

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

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

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

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