3

I have this markup:

<p style="background-color: #000">
    <button>
        <svg width="25px" height="25px" xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 43.42 43.42">
            <path d="M21.71,43.42A21.71,21.71,0,1,1,43.42,21.71,21.73,21.73,0,0,1,21.71,43.42ZM21.71,2A19.71,19.71,0,1,0,41.42,21.71,19.73,19.73,0,0,0,21.71,2Z" style="fill: rgb(255, 255, 255);"></path>
        </svg>
    </button>
</p>

I want the button to be no larger than the 25x25 SVG it contains.

button {
  background: transparent;
  border-width: 0;
  padding: 0;
}

The width of the button is correct, but the computed height is 28px, and I can't figure out where the 3 extra pixels are coming from.

https://codepen.io/anon/pen/oyrRbM

Mister Epic
  • 16,295
  • 13
  • 76
  • 147
  • If you add `line-height: 0` to the `

    ` the 3 extra pixels go away.

     – Andrew Morton Jul 06 '18 at 18:19
  • Does this answer your question? [Button height is greater than the nested content's height](https://stackoverflow.com/questions/45423874/button-height-is-greater-than-the-nested-contents-height) – MMalke Apr 28 '21 at 17:37

2 Answers2

6

SVGs are inline-block elements by default, which means they have extra space to accomodate character descenders (y and g "legs" for example).

You should be able to get the desired behaviour by changing the SVG to display: block.

Check this answer's illustration.

MMalke
  • 1,857
  • 1
  • 24
  • 35
1

button {
  background: transparent;
  border-width: 0;
  padding: 0;
  line-height:0px
}
<p style="background-color: #000">
    <button>
        <svg width="25px" height="25px" xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 43.42 43.42">
            <path d="M21.71,43.42A21.71,21.71,0,1,1,43.42,21.71,21.73,21.73,0,0,1,21.71,43.42ZM21.71,2A19.71,19.71,0,1,0,41.42,21.71,19.73,19.73,0,0,0,21.71,2Z" style="fill: rgb(255, 255, 255);"></path>
        </svg>
    </button>
godfather
  • 1,518
  • 2
  • 10
  • 17
  • Which browser did you test that in? It doesn't work for me in IE11, Edge, or Firefox on Windows 10. Also, a unitless number is the [preferred way](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) to set line-height. – Andrew Morton Jul 07 '18 at 09:46
  • what if you give the button a height 25px – godfather Jul 07 '18 at 11:47