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 that you have read and understand our privacy policy and code of conduct.

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