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•3w 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•3w ago

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

theoriginalandrew•3w ago

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

vince•3w ago

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

theoriginalandrew•3w ago

ohhh thats the footer styles yup lol

vince•3w 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•3w ago

lol all good 😄

b1mind•3w ago

na that is a odd quirk honestly xD

vince•3w 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•3w 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•3w 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

vince•3w ago

i've been using grid more lately 😎

theoriginalandrew•3w ago

same

vince•3w 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•3w ago

though writing conditional grid layouts are not fun

vince•3w ago

i dont even wanna think about that lolll

theoriginalandrew•3w ago

vince•3w 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•3w ago

literally just a toggle for a 1px divider 😄

b1mind•3w ago

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

theoriginalandrew•3w ago

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

Gaming

Programming

How to match border height of element