0

My button is 54px wide and 57px tall but it's content is 50x50. Where is the extra space coming from ?

I know how to "fix" it, that's pretty easy i just have to set the button width and height. Just wondering why it's like this.

* {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

body {
  width: 100vw;
  height: 100vh;
}

svg {
  width: 25px;
  height: 25px;
  margin: 12.5px;
}
<button>
    <svg data-dialog-svg fill="none" stroke="currentColor" 
    strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24">
        <path d="m6 9 6 6 6-6"></path>
    </svg>
</button>
. jsfiddle
Adam
  • 5,495
  • 2
  • 7
  • 24
  • It's probably styling from the User Agent Stylesheet. This is the default styles applied by the browser before you add any of your own styling. Some info on [Stackoverflow](https://stackoverflow.com/questions/12582624/what-is-a-user-agent-stylesheet) and this [blog](https://meiert.com/en/blog/user-agent-style-sheets/) – Adam May 24 '23 at 13:50
  • "content is 50x50. " How do you come up with that: From the svg but your "button" has content-box rather than "border box" the computed for the button is 53px high by 50px wide in my chrome browser. SO Which browser are you using and how do others show the computed style? – Mark Schultheiss May 24 '23 at 13:57
  • @MarkSchultheiss I'm using firefox but even so you still have 3px too much. –  May 24 '23 at 20:55
  • @MarkSchultheiss I've tried opening the jsfiddle in chrome and i'm still in 54x57. Changing the display of the svg to block makes it 54x54. –  May 24 '23 at 20:59

0 Answers0