Weird white lines around the background image?

Weird white lines around the background image?


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%?


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!


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.


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:


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


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

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