Alignment challenge - Can you solve it?

I’m hoping somebody can help solve an issue I’m having with alignment.

As you can see, the title and image in the yellow tile aren’t aligning to the bottom of the container. In the layout settings I have the container set to horizontal then align to bottom and then justify evenly from start to end.

Could somebody shed some light on this?

https://preview.webflow.com/preview/rubiks-marketing-consultancy?utm_medium=preview_link&utm_source=designer&utm_content=rubiks-marketing-consultancy&preview=25c5926bcca1fc638f009d706e3dbc4e&mode=preview

You could add a bottom margin of -16px to the “Marketing Recruitment” H2 but make sure to give it a specific class so you don’t move all the other H2s.

The issue is a combination of the line-height on the text and the bottom margin that’s included by default on Heading elements:

Removing the bottom margin gets you almost there, but you’ll probably want to adjust your line-height to get it the rest of the way:

If you’d rather give it some negative margin, you’ll need to keep in mind that you’ll want to utilize some combo classes for the two headings in the colored boxes as the left side suffers from the same issue on the top:

For reference, I found that you’ll need a -.275em bottom margin and a -.15em top margin to get the two lining up nicely:

1 Like