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.