Kevin Powell - CommunityKP-C
Kevin Powell - Community2y ago
26 replies
vince

How to match border height of element

I have 2 links inside a container in the picture.

The markup looks something like this:

<footer>
  <a class="primary-cta">Link 1</a>
  <a class="secondary-cta">Link 2</a>
</footer>


And the styles are something like this:

footer {
  display: flex;
  align-items: center;
  gap: 1rem;
}


You'll see that the seconday-cta is slightly bigger because of the border around it. The secondary-cta link is about 50px height, and the primary-cta link is about 48px height. I've tried setting a min-height on the primary-cta to 100% but no dice. I know this is a simple issue but I seem to struggle with it a lot
image.png
Was this page helpful?