The width of the button is not equal to its child element even though I set display: inline-block. The padding of the child element might affect this

Question

I wanna set the button width depending on its child element (which is tag).
But, the button only consider the child's pure content width, and ignore the padding of the child.

I tried to set width of the button to fit-content, max-content, auto and so on, and didn't work.
How can I fix this?

CSS

 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }
 button {
   display: inline-block;
   padding: 0;
   margin: 0;

   & > a {
     display: inline-block;
     padding: calc(13px / 1.618) calc(100% / 1.618 / 1.618);
   }
 }

 *, *::before, *::after { box-sizing: border-box; } button { display: inline-block; padding: 0; margin: 0; } button > a { display: inline-block; padding: calc(13px / 1.618) calc(100% / 1.618 / 1.618); }

 <button><a>click</a></button>

Answer 1

The problem is in your padding you can't use 100%. Use px instead of percent

Answer 2

 *, *::before, *::after { box-sizing: border-box; } a { padding: 5px 5px; }

 <button> <a>click </a> </button> <button> <a>click to open</a> </button> <button> <a>click to open the link</a> </button>

I have added three buttons to show different child-width .