2

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

введите сюда описание изображения

html, body, h1 {
    font-family: 'Gamja Flower', cursive;
    padding: 0;
    margin: 0;
}
header {
    height: 110px;
    color: #eeeff1;
}
nav, .menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    font-size: 22px;
}
.logo h1 {
    color: #353840;
}
.logo p {
    color: #c3563d;
}
.logo {
    line-height: 0.3;
    margin-top: 40px;
    margin-right: 200px;
}
.menu li {
    display: block;
    margin-right: 30px;
    margin-top: 30px;
    margin-left: 40px;
    font-weight: bold;
}
.menu li:nth-child(3) {
    margin-top: 21px;
    color: #fff;
    background-color: #dd4b2b;
    border-radius: 10px;
    padding: 8px 20px;
    text-decoration: none;
    text-align: center;
}
.menu li a {
    text-decoration: none;
    color: #31353e;
}
.main {
    width: 100%;
}
.image {
    position: relative;
}
.image img {
    display: block;
    width: 100%;
    height: 1000px;
}
.image .captions {
    left: 5%;
    right: 5%;
    bottom: 55%;
    position: absolute;
    text-align: center;
    line-height: 0.5;
}
.image .captions .line-1 {
    color: #fff;
    font-size: 30px;
}
.line-1 h1 {
    letter-spacing: 2px;
}
.image .captions .line-2 {
    color: #fff;
    font-weight: bold;
    font-size: 26px;
}
.main-2 .icons { 
    color: white; 
    left: 15%; 
    right: 5%; 
    bottom: 23.5%; 
    position: absolute; 
    } 
    .icons img { 
    width: 110px; 
    height: 110px; 
    } 
    .main-2 .icons-2 { 
    color: white; 
    left: 50%; 
    right: 5%; 
    bottom: 21.5%; 
    position: absolute; 
    } 
    .icons-2 img { 
    width: 110px; 
    height: 110px; 
    } 
    .main-2 .icons-3 { 
    color: white; 
    left: 80%; 
    right: 5%; 
    bottom: 19.5%; 
    position: absolute; 
    } 
    .icons-3 img { 
    width: 110px; 
    height: 110px; 
    }
.button {
    position: absolute;
    bottom: 9%;
    left: 43%;
    display: block;
    text-decoration: none;
    font-size: 22px;
    text-align: center;
    color: #61362c;
    background-color: #fff;
    border-radius: 20px;
    padding: 15px;
    width: 145px;
}
.container {
    padding: 0px;
    margin: 0;
    height: 900px;
    width: 100%;
    background-color: red;
    text-align: center;
}
.container h1 {
    padding-top: 80px;
    font-size: 52px;
}
div.images {
    margin-top: 87px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.first h2 {
    text-align: center;
    padding-top: 20px;
}
.first p {
    text-align: center;
    font-size: 18px;
}
.second h2 {
    text-align: center;
    padding-top: 20px;
}
.second p {
    text-align: center;
    font-size: 18px;
}
.third h2 {
    text-align: center;
    padding-top: 20px;
}
.third p {
    text-align: center;
    font-size: 18px;
}
.button2 {
    display: block;
    text-decoration: none;
    font-size: 22px;
    text-align: center;
    color: #fff;
    background-color: #dd4b2b;
    border-radius: 20px;
    padding: 15px;
    width: 195px;
    margin: 40px auto;
}
.container-2 {
  position: relative;
}
.container-2 img {
  display: block;
  width: 100%;
  height: 350px;
}
.container-2 .newsletter {
    left: 5%;
    right: 5%;
    bottom: 20%;
    position: absolute;
    text-align: center;
}
.container-2 .newsletter h1 {
  color: #fff;
}
.container-2 .newsletter p {
  font-size: 22px;
  color: #fff;
  margin-bottom: 40px;
}
.button3 {
    display: block;
    text-decoration: none;
    font-size: 22px;
    text-align: center;
    color: #55281d;
    background-color: #fff;
    border-radius: 20px;
    padding: 15px;
    width: 195px;
    margin: 0 auto;
}
.container-3 {
    background-color: #fff;
    height: 400px;
}
.captions-2 {
    display: inline-block;
    margin-top: 120px;
    margin-left: 200px;
}
.button4 {
    display: inline-block;
    text-decoration: none;
    font-size: 22px;
    text-align: center;
    color: #fff;
    background-color: #dd4b2b;
    border-radius: 35px;
    padding: 15px;
    width: 195px;
    margin-top: 40px;
}
.food {
    display: inline;
}
img.pancake {
    width: 300px;
    height: 300px;
    float: right;
    margin-top: 100px;
    margin-right: 200px;
}
footer {
    background-color: #d75d0e;
    height: 406px;
    margin-top: 80px;
}
.flex li {
    list-style-type: none;
    line-height: 2;
    font-size: 18px;
}
.column-1 {
    margin-top: 80px;
}
.column-2 {
    margin-top: 80px;
}
.column-3 {
    margin-top: 80px;
}
.flex {
    display: flex;
    justify-content: space-around;
}
.flex a {
    color: #fff;
    text-decoration: none;
}
.last-image {
    position: relative;
}
.last-image img {
    display: block;
  width: 100%;
  height: 310px;
}
.last-image .last-caption {
    left: 5%;
    right: 5%;
    bottom: 30%;
    position: absolute;
    text-align: center;
    color: #fff;
}
.last-caption h1 {
    font-weight: normal;
}
<!DOCTYPE html>
    <html>
        <head>
            <title>Вёрстка</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet">
            <link href="style.css" rel="stylesheet">
        </head>
        <body>
            <header>
                <nav>
                    <div class="logo">
                            <h1>Panakeia</h1>
                            <p>Free PSD Template</p>
                    </div>
                    <ul class="menu">
                       <li><a href="#">Fusce at</a></li> 
                       <li><a href="#">Facilisis</a></li> 
                       <li><a href="#">Ante donec</a></li> 
                       <li><a href="#">Blandit rhoncus</a></li> 
                       <li><a href="#">Placerat</a></li> 
                    </ul>
            </nav>
            </header>
            <div class="main">
                <div class="image">
                        <img src="Layer1.png"/>
                <div class="captions">
                    <div class="line-1"><h1>Integer at tortor ut magna</h1></div>
                    <div class="line-2"><p>finibus lobortis sed quis tellus.</p></div>
                </div>
                <div class="main-2"> 
                        <div class="icons"> 
                            <img src="Layer 2.png"> 
                             <h2>Tincidont</h2> 
                             <p>Phasellus arcu justo, ullamcorper non diam sit amet,<br> 
                        luctus condimentum metus. Nullam tempus egestas<br> efficitur. Sed quam dolor.</p> 
                        </div> 
                        <div class="icons-2"> 
                            <img src="Layer 3.png"> 
                            <h2>Duis Bibendum</h2> 
                            <p>Ut arcu arcu, faucibus eu risus blandit, pulvinar<br> 
                                viverra justo. Phasellus arcu justo, ullamcorper<br> non 
                                diam sit amet, luctus condimentum metus. In<br> hac habitasse platea dictumst. </p>
                        </div> 
                        <div class="icons-3"> 
                            <img src="Layer 4.png"> 
                            <h2>Donec Ligula</h2> 
                            <p>Nullam tempus egestas efficitur. Sed quam dolor,<br> vulputate sed mattis et, sodales quis orci. Ut arcu<br> arcu,faucibus eu risus blandit,. 
                            </div> </p>
                </div>
                <a class="button" href="#">Read more</a>
            </div>
        </div>
        <div class="container">
            <h1>Our news</h1>
            <div class="images">
                <div class="first">
                        <img src="Layer 5.png">
                        <h2>Lorem ipsum</h2>
                        <p>Est a elit scelerisque vestibulum. Donec est sem,<br> lobortis sit amet imperdiet vel, pretium lobortis<br> erat. Nulla vitae hendrerit odio.</p>
                        <a class="button2" href="#">Read more</a>
                </div>
                <div class="second">
                        <img src="Layer 6.png">
                        <h2>Lorem ipsum</h2>
                        <p>Est a elit scelerisque vestibulum. Donec est sem,<br> lobortis sit amet imperdiet vel, pretium lobortis<br> erat. Nulla vitae hendrerit odio.</p>
                        <a class="button2" href="#">Read more</a>
                </div>
                <div class="third">
                        <img src="Layer 7.png">
                        <h2>Lorem ipsum</h2>
                        <p>Est a elit scelerisque vestibulum. Donec est sem,<br> lobortis sit amet imperdiet vel, pretium lobortis<br> erat. Nulla vitae hendrerit odio.</p>
                        <a class="button2" href="#">Read more</a>
                </div>
                </div>
                </div>
                <div class="container-2">
                    <img src="Layer 8.png">
                    <div class="newsletter">
                        <div class="line-1"><h1>Newsletter</h1></div>
                        <div class="line-2"><p>Ut arcu arcu, faucibus eu risus blandit, pulvinar viverra justo.<br> Phasellus arcu justo,
                        ullamcorper non diam sit amet, luctus condimentum metus</p></div>
                        <a class="button3" href="#">Sign up</a>
                </div>
                </div>
                <div class="container-3">
                    <div class="captions-2">
                            <h1>Ipsum dolor sit amet</h1>
                            <p>Nam accumsan nunc sit amet elementum sollicitudin. Integer vel lacus eget tortor<br> lobortis tincidunt sed eu dolor. Phasellus cursus augue ac pulvinar cursus.
                                <br><br>
                                Quisque ut erat ornare, feugiat turpis a, fringilla felis. Nulla molestie lorem et orci<br> sagittis, et accumsan ex porta.</p>
                            <a class="button4" href="#">Sign up</a>
                    </div>
                    <div class="food">
                            <img class="pancake" src="Layer 9.png">
                    </div>
                </div>
                <footer>
                <div class="flex">
                <div class="column-1">
                    <ul>
                        <li><a href="#">Ad litora torquent</a></li>
                        <li><a href="#">Per conubia</a></li>
                        <li><a href="#">Nostra</a></li>
                        <li><a href="#">Per inceptos</a></li>
                        <li><a href="#">Himenaeos</a></li>
                        <li><a href="#">In consectetur</a></li>
                    </ul>
                </div>
                <div class="column-2">
                    <ul>
                        <li><a href="#">Taciti sociosqu</a></li>
                        <li><a href="#">Ad litora torquent</a></li>
                        <li><a href="#">Per conubia</a></li>
                        <li><a href="#">Himenaeos</a></li>
                        <li><a href="#">In consectetur</a></li>
                        <li><a href="#">Nisi sed blandit</a></li>
                        <li><a href="#">Tincidunt</a></li>
                    </ul>
                </div>
                <div class="column-3">
                    <ul>
                        <li><a href="#">Nostra</a></li>
                        <li><a href="#">Per inceptos</a></li>
                        <li><a href="#">Himenaeos</a></li>
                        <li><a href="#">In consectetur</a></li>
                        <li><a href="#">Nisi sed blandit</a></li>
                        <li><a href="#">Tincidunt</a></li>
                    </ul>
                </div>
                </div>
                </footer>
                <div class="last-image">
                <img src="Layer 8.png">
                <div class="last-caption">
                        <h1>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br>
    Try awesome tool for desgners symu.co</h1>
                </div>
                </div>
        </body>
    </html>

2
  • Если проблема решена, надо принять соответствующий ответ нажатием на галочку слева от него.
    – Qwertiy
    28 дек 2018 в 16:22
  • Здравствуйте. Если вы не разбираетесь в таких базовых вещах, то вот вам хороший совет: вначале CSS-кода подключайте normalize.css, он как-раз и создан для кроссбраузерности и обнуления разных там отступов. Также рекомендую изучить стиль написания по BEM, это даст вашему коду единый стиль и структуру, вам самому будет проще понимать ваш код. Также зачастую стоит отказаться от записи стилей на теги, пишите на классы. 28 дек 2018 в 16:51

4 ответа 4

0

Задайте классу .image display: -webkit-box;

2
  • Спасибо, помогло. 27 дек 2018 в 16:30
  • 1
    @Lorkend, ну хоть просто flex. Зачем это старьё откапывать?
    – Qwertiy
    28 дек 2018 в 16:22
0

Может быть поможет вот это. Надо вставить в начало css файла.

*{
  margin: 0;
  padding: 0;
}
0

Пропишите для .container h1 строку стиля margin-top: -15px;

-1

Скорее всего это схлопывание марджинов (margin collapse). Попробуй

header, .main, .container {
  overflow: hidden;
}

Только лучше не прям так писать, а задать для header'а какой-нибудь класс.

3
  • 1
    Плохой практике ты учишь. Я например даже для body не прописываю overflow-x: hidden;, хотя это многие рекомендуют делать, а всё потому, что в хорошей вёрстке, не должно быть горизонтального скролла, даже и без данного свойства. Но есть ещё один большой минус подобной записи: если в вёрстке, что-то будет неверно(немного вылазит элемент за родительский контейнер), то с overflow: hidden; ты этого не увидишь, так как автоматом обрежется, следовательно ты не сможешь это исправить. А если же нет overflow: hidden;, то ты просто скролл увидишь, поймешь, что что-то не так и исправишь. 28 дек 2018 в 16:45
  • Надеюсь я понятно объяснил: в большинстве своём, в хорошей вёрстке не вешается overflow: hidden; на body, секции и тому подобное. У тебя же совсем грубо, учитывая на какие глобальные классы ты это повесил. Это точно плохая практика, минус ставлю тебе. 28 дек 2018 в 16:47
  • @AlexandrKazakov, при нормальной вёрстке ничего за overflow:hidden не вылазиет, кроме того, что должно вылазить по задумке.
    – Qwertiy
    28 дек 2018 в 22:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.