What influences the actually rendered inner size of an inline element?

Question

I'm trying to understand what is relevant for the actual inner height of a button.

I would expect the two buttons below to have the same height of 32px, and in particular the same inner height of 20px.

These are the styles and markup:

<style>
button {
    font-size: 16px;
    line-height: 1.25;
    padding: 5px;
    border: 1px solid grey;
}

svg {
    width: 20px;
    height: 20px;
}
</style>
<button>Button with text</button>
<button>
  <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    <path d="..."></path>
  </svg>
</button>

https://jsfiddle.net/6sxb4zof/1/

The text-only button behaves as expected: It has an actual inner height of 20px equal to its line-height.

But if I replace that text with a 20px <svg>, suddenly the inner height is 25px.

What is going on? How does the rendering logic work here?

score 2 · Accepted Answer · answered Jan 15 '21 at 19:03

(depending on font settings) there is a gutter below the SVG to allow for all those letters that need space below the base-line: pqyj

a vertical-align:top gets rid of that unwanted space

<style>
  button {
    line-height: 1.25;
    font-size: 16px;
    padding: 5px;
    border: 1px solid grey;
  }

  svg {
    width: 20px;
    height: 20px;
    vertical-align: top;
  }

</style>

<button>Button with text</button>
<button><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <path d="m170 20h-35l-10-10h-50l-10 10h-35v20h140v-20zm-130 150c0 5 2 10 6 14c4 4 9 6 14 6h80c5 0 10-2 14-6c4-4 6-9 6-14v-120h-120v120z"></path>
  </svg></button>

What influences the actually rendered inner size of an inline element?

1 Answers1