Vertical space between 2 div's

[grimski]

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:

http://codepen.io/moy/pen/ygNeJL

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!

[Paulie_D]

Which two elements are you referring to and when?

[bearhead]

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

[grimski]

@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.

[bearhead]

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

[grimski]

@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! :)

[Author]

Posts