Guys, I have a container, and there is an image in it. The image in container-2 has a padding at the top (highlighted in red), which I can’t remove and I can’t find the reason why it is there.

enter image description here

 html, body, h1 { font-family: 'Gamja Flower', cursive; padding: 0; margin: 0; } header { height: 110px; color: #edeff1; } nav, .menu { display: flex; flex-direction: row; justify-content: flex-end; font-size: 22px; } .menu li { display: block; margin-right: 40px; margin-top: 30px; margin-left: 40px; font-weight: bold; } li:nth-child(3) { margin-top: 21px; color: #ffffff; 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: 25%; position: absolute; } .icons img { width: 110px; height: 110px; } .main-2 .icons-2 { color: white; left: 50%; right: 5%; bottom: 23%; position: absolute; } .icons-2 img { width: 110px; height: 110px; } .main-2 .icons-3 { color: white; left: 80%; right: 5%; bottom: 21%; 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: 0; margin: 0; height: 900px; width: 100%; background-color: #edeff1; 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; } .second h2 { text-align: center; padding-top: 20px; } .second p { text-align: center; } .third h2 { text-align: center; padding-top: 20px; } .third p { text-align: center; } .button2 { display: block; text-decoration: none; font-size: 22px; text-align: center; color: #66686f; background-color: #fff; border-radius: 20px; padding: 15px; width: 195px; margin: 40px auto; } .container-2 { width: 100%; height: 350px; background-color: white; padding: 0; margin: 0; } .container-2 img { background-color: red; display: block; position: relative; height: 100%; width: 100%; padding: 0; margin: 0; } 
 <link href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet"> <header> <nav> <div class="nav"> <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> </div> </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> Phasellus arcu justo, ullamcorper non diam sit amet,<br> luctus condimentum metus. Nullam tempus egestas<br> efficitur. Sed quam dolor. </div> <div class="icons-2"> <img src="Layer 3.png"> <h2>Duis Bibendum</h2> 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. </div> <div class="icons-3"> <img src="Layer 4.png"> <h2>Donec Ligula</h2> Nullam tempus egestas efficitur. Sed quam dolor,<br> vulputate sed mattis et, sodales quis orci. Ut arcu<br> arcu,faucibus eu risus blandit,. </div> </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>

  • Try on the image vertical-align: top - Misha Saidov
  • You have a strip in the picture, obviously - humster_spb
  • usually write for the img {bisplay: block;} tag and by default img inline-block; i.e. there are indents - MaximLensky

1 answer 1

I do not see the stripes - maybe we have a transparent background on the top of the picture

 html, body, h1 { font-family: 'Gamja Flower', cursive; padding: 0; margin: 0; } header { height: 110px; color: #edeff1; } nav, .menu { display: flex; flex-direction: row; justify-content: flex-end; font-size: 22px; } .menu li { display: block; margin-right: 40px; margin-top: 30px; margin-left: 40px; font-weight: bold; } li:nth-child(3) { margin-top: 21px; color: #ffffff; 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: 25%; position: absolute; } .icons img { width: 110px; height: 110px; } .main-2 .icons-2 { color: white; left: 50%; right: 5%; bottom: 23%; position: absolute; } .icons-2 img { width: 110px; height: 110px; } .main-2 .icons-3 { color: white; left: 80%; right: 5%; bottom: 21%; 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: 0; margin: 0; height: 900px; width: 100%; background-color: #edeff1; 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; } .second h2 { text-align: center; padding-top: 20px; } .second p { text-align: center; } .third h2 { text-align: center; padding-top: 20px; } .third p { text-align: center; } .button2 { display: block; text-decoration: none; font-size: 22px; text-align: center; color: #66686f; background-color: #fff; border-radius: 20px; padding: 15px; width: 195px; margin: 40px auto; } .container-2 { width: 100%; height: 350px; background-color: white; padding: 0; margin: 0; } .container-2 img { background-color: red; display: block; position: relative; height: 100%; width: 100%; padding: 0; margin: 0; } 
 <link href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet"> <header> <nav> <div class="nav"> <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> </div> </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> Phasellus arcu justo, ullamcorper non diam sit amet,<br> luctus condimentum metus. Nullam tempus egestas<br> efficitur. Sed quam dolor. </div> <div class="icons-2"> <img src="Layer 3.png"> <h2>Duis Bibendum</h2> 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. </div> <div class="icons-3"> <img src="Layer 4.png"> <h2>Donec Ligula</h2> Nullam tempus egestas efficitur. Sed quam dolor,<br> vulputate sed mattis et, sodales quis orci. Ut arcu<br> arcu,faucibus eu risus blandit,. </div> </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="https://i.stack.imgur.com/bmuVz.png"> </div>