JSFiddle - React, Tailwind, and code Playground

by tnunamak

HTML

<div id="container">
  <span class="star">★</span><span class="star">★</span>
</div>

CSS

#container { 
  display: inline-block;
  border: dashed 1px red;
}

.star {
  /* This creates extra width. */
  /*  padding: 4.48px 6.72px; */
  
  /* This is fine. */
  /*  padding: 5px; */
  
  /* This creates extra width. */
  padding: 5.5px;

  background-color: lightgray;
}