Width with rem size deform if padding is present-CodePudding

I have a problem in my project. When I insert custom font-size at html level, the red badges deform me when there is padding (p-6) on the first line of code. Can anyone help me? I use tailwind, but this error is given to me even if I insert the width in the style, exclusively with the rem.

Demo

CodePudding user response：

It's related to subpixel rendering. If you use 13px font-size at the html level, the width and height become 9.75px.

The solution is using a large value and scaling it.

Demo

I used w-6 h-6 ring-8 scale-50 instead of w-3 h-3 ring-4. And this looks perfect.

html {
  font-size: 13px;
}

<script src="https://cdn.tailwindcss.com"></script>

<div >
  <header >
    <div >
      <div >
        <div ></div>
        <div ></div>
      </div>
      <div >
        <div ></div>
        <div ></div>
      </div>
      <div >
        <div ></div>
        <div ></div>
      </div>
    </div>
  </header>
</div>