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>

<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;
}

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

21 Replies

theoriginalandrew•9mo ago

2 ways you could tackle this - you could add box-sizing: border-box on the anchors or you could calculate the amount for the top/bottom height of the border and add that to the height of your primary button

b1mind•9mo ago

take off the align-items center it should match heights shouldn't need it anyway?

theoriginalandrew•9mo ago

yeah possibly - can we see what the code looks like for the buttons themselves?

vinceOP•9mo ago

Oh duh... yes b1 was right with align-items: center... should have figured that one out 😅 thanks for the replies guys

theoriginalandrew•9mo ago

ohhh thats the footer styles yup lol

vinceOP•9mo ago

Yea sorry lol I should have included more code but didn't want to copy and paste my whole thing in there It's a footer to the hero ahha

theoriginalandrew•9mo ago

lol all good 😄

b1mind•9mo ago

na that is a odd quirk honestly xD

vinceOP•9mo ago

Yea you'd think display: flex would stop its items' heights from 'stretching' automatically without align-items on it since it does it with width lol

b1mind•9mo ago

This is one those things where I found grid auto-flow column to be nicer than flex #depends causxe you have align-content

theoriginalandrew•9mo ago

i mean "flex" and "stretch" are the same 😉 😉 😉 plus you can also just do place-items: center; for grid and that is so much better

vinceOP•9mo ago

i've been using grid more lately 😎

theoriginalandrew•9mo ago

same

vinceOP•9mo ago

I actualyl don't even know why I had align-items on it anyway I think I'll just take it off completely

theoriginalandrew•9mo ago

though writing conditional grid layouts are not fun

vinceOP•9mo ago

i dont even wanna think about that lolll

theoriginalandrew•9mo ago

vinceOP•9mo ago

Ohhh that actually doesn't look that bad, just tedious and code organization probably gets thrown out the window with that a little bit

theoriginalandrew•9mo ago

literally just a toggle for a 1px divider 😄

b1mind•9mo ago

I've been doing some with [data-sets] because Prismic sends them already. its pretty nice actually >.>;;

theoriginalandrew•9mo ago

also just converting from CSS-in-JS to classes only is also a nightmare 🙂

Gaming

Programming

How to match border height of element

Did you find this page helpful?