Question 1970 in Wordpress Question posted in
The official Wordpress documentation can be found here.

What is causing the little white gap on the bottom of my music playlist image? – WordPress

I’ll preface this by saying I only have the vaguest idea of what I’m doing, and if something works it’s by pure fluke and I have absolutely no coding ability.

So using some other code I found scattered around the web (one piece for a long image scroll effect, the other to keep an image fixed at the bottom), I managed to make an iTunes and Spotify playlist mockup. You can see the full working thing here, but there’s a problem. There’s a little white gap at the bottom (between the long image, and the bottom fixed image.

And this is the code I used:

<div>
    <style>
      .imageitunes{
        width: 100%;
        height: 400px;
        overflow: auto;
      }
       .myimageitunes{
 width:750px;
 position: relative;
 bottom:0%;
      }
    </style>
</div>
    <div class="imageitunes">
    <img src="https://mylegshurt.co.uk/wp-content/uploads/2023/02/ituneslong2.png" alt="myimageitunes">
  </div>
  <div class="myimageitunes">
    <img src="https://mylegshurt.co.uk/wp-content/uploads/2023/02/itunes-bottom.png" alt="myimageitunes">
  </div>

It took me about two days to even get to this point, faffing and tweaking until I got something that won’t break my entire site and is actually functional.* The white gap is bugging me though. If anyone has any ideas on what could be causing it I’d greatly appreciate it. Is it something to do with them being seperate s? If so how can I seperate the code without them merging together?

Thanks guys and gals.

Tags:

2

Answers


  1. 0

    <img> is inline element by default, so I believe the white gap is caused by the whitespace before </div>.
    Setting the style of your image to display: block should do the trick.

    Login or Signup to reply.
  2. 0

    When I add this, it works:

    .imageitunes, .imagespotify {
    line-height: 0px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search