cssborder-box

border-box is still adding the border to the height of the element

I have a link-button that has a height of 34px instead of 32px, if box-sizing: border-box would work. And I don't know why.

There is a block element of 24px x 24px A padding of 4px (top & bottom) 24 + 8 = 32px But the border adds the other 2px ...

What do I do wrong or forget to add here?

HTML:

<div class="link-button">
  <span class="block"></span>
  <span>Inspect me, my height is 34px instead of 32px?</span>
</div>

.link-button{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  min-height: 32px;
  height: auto;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  color: #267ace;
  background: rgba(38, 122, 206, 0.1);
  border: 1px solid blue;
}

.block{
  width: 24px;
  height: 24px;
  margin-right: 8px;
  display: block;
  background: blue;
}

enter image description here

Solution

  • You logic is correct and the height should be equal to 32px but don't forget that you have content inside having a height equal to 24px. You specified a min-height and not height so your element is allowed to expand if the content doesn't fit inside.

    24px of content height + 2x4px padding + 2x1px border = 34px

    34px is bigger than 32px so you will end with a height equal to 34px

    Seen differently, you content height should be equal to:

    32px - 2x4px padding - 2x1px border = 22px

    22px are not enough to hold your 24px (the height of the content) so 2px are added to the content height and you get 34px

    It's a coincidence that the added height is equal to the border but it's not related. Add more content inside and the height will keep growing

    .link-button{
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  min-height: 32px;
  height: auto;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  color: #267ace;
  background: rgba(38, 122, 206, 0.1);
  border: 1px solid blue;
}

.block{
  width: 24px;
  height: 26px;
  margin-right: 8px;
  display: block;
  background: blue;
}
    <div class="link-button">
  <span class="block"></span>
  <span>Inspect me, my height is 36px instead of 32px?</span>
</div>