The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Vertical space between 2 div's

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #249749

    Minor issue but it’s doing my head in. I’m sure it’s something ridiculously obvious but I think I just need some fresh eyes on this. I’m just wondering what’s causing the space between 2 elements. As far as I can tell, there’s no margin/padding or top/bottom values and adjusting line-height doesn’t seem to do anything.

    Here’s a CodePen example which replicates the issue I’m seeing:

    It seems consistent enough to just apply a negative margin to close the gap but I’d like to find out what’s actually causing it if I can.

    Thanks in advance!


    Which two elements are you referring to and when?


    It’s a combination of the 1.8em line-height on the body selector and a 10px margin-bottom on .shadow


    @Paulie_D the gap between btn-next-panel and shadow at the end of the animation.

    I should probably add the background-color: rgba(255, 0, 0, .10) are just there so I can see the actually sizes of each element on the page.


    oh, I thought you were referring to the gap between the shadow and the text.
    the gap between the shadow and circle is caused by these two lines on .shadow:

        transform: scaleY(0.25);
        transform-origin: 50% 50%;

    Just change the transform-origin to 50%, 0


    @bearhead bloody hell, I knew it would be something relatively straight forward, I just couldn’t see it!

    Of course, the gap is the original height of the element before it is scaled down. Scaling the element with a transform doesn’t increase/reduce the physical space the item takes up.

    Thanks for spotting this, I can sleep easy now! :)

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.