Weird white lines around the background image?

HTML-CSS
1

don’t mind the design

  1. Why are ther white margins around the background image?

  2. why is there a scrollbar on the side?

  3. can you explain the difference between 100vh and 100%?

2

That’s because CodePen’s preview iframe has a margin of 15px on body. You simply need to set that to 0 (similar to what you have already done for padding).

This is related to 1.—your inner container has a height of 100vh, which is already the whole of the height of the viewport. That, together with the 15px top and bottom margins, means that your page is actually 100vh + 30px tall, hence the scrollbar.

The vh unit is a percentage height relative to the viewport’s height, and 100vh refers to 100% of the viewport’s height. When you use 100% as a length, that is relative to its parent container; so if the parent container is 600px in height, a child with height 100% is also 600px tall… etc…

I hope that helps!

3

thank you for the answer, but is it more common to use 100vh? I can’t seem to find a situation to use height as 100% and needing to set the specific height for the parent element.

4

I’m afraid I can’t comment on that in general, but I don’t think it’s entirely uncommon. Keep in mind that the parent container only needs to have a height the child can depend on—there is nothing stopping you from using vh height on the parent container and use % height on the child. Perhaps something like this is a valid use case:

HTML

<section class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</section>

CSS

.parent {
  height: 40vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: royalblue;
}

.child {
  width: 25%;
  height: 50%;
  background: #1CE;
}