0

How it looks, that small space between those two

[Css code. ps. i did code reset code (cant be seen on picture)2

It have reset code, i also tried to add margin and padding on each one of them, and it didnt work. Same amount of space is there when resizing screen. Any idea why?

Archaeologist03
  • 181
  • 1
  • 2
  • 11
  • 1
    Post your html/css code here not just a screenshot of a part of css. JSFiddle or CodePen example might help also. – August May 04 '18 at 16:31
  • Possible duplicate of [Image inside div has extra space below the image](https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image). – showdev May 04 '18 at 16:40
  • Possible duplicate of [Image inside div has extra space below the image](https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) – TylerH May 05 '18 at 02:02

2 Answers2

0

Add display: block; to the header image to remove the white space.

header img {
  width: 100%;
  height: 50vh;
  display: block
}

Detailed explanation: Removing white space below inage elements, or why inline elements have descenders

haugsand
  • 400
  • 1
  • 5
0

It's hard to say without seeing any of the code, but most likely it's something in your bottom container that has an element in it that has a margin-top. Top margins will reach outside of its container if the container doesn't have any padding.

To get the margin to stay inside, you'll need to add padding to its container. OR, you can remove the top margin of the element that is pushing outside fo the container.

I've made a codepin for you to play with. It has an example of what you're are experiencing, and an example below that solves the problem by adding padding.

https://codepen.io/joshcoast/pen/MGvxgw

HTML:

<div class="bigheader">Some stuff</div>
<div class="content">
  <nav class="nav1">
    <a href="#">a link</a>
  </nav>
</div>
<br>

<div class="bigheader">Another example</div>
<div class="content content-with-padding">
  <nav class="nav2">
    <a href="#">a link</a>
  </nav>
</div>

CSS:

.bigheader {
  background-color: #999;
  color: white;
  padding: 20px;
  height: 200px;
}

.content {
  background-color: tan;
}
.content-with-padding {
  padding: 5px;
}

.nav1 {
  margin-top: 20px;
}

.nav2 {
  margin-top: 20px;
}

Hope that helps!

Josh Coast
  • 602
  • 6
  • 7