如何创建一个方形div，其宽度和高度与角色的高度完全相等？

Question

我想创建一个div，width和height完全等于1个字符的高度，宽度和高度应该是响应的：如果我改变了字体大小，宽度和高度也会改变。我试过了：

<table border="1" style="position:relative;">
  <tr>
    <td style="font-size:144px">&nbsp
      <div style="position:absolute;top:0%;left:0%;background-color:red;width:100%;padding-bottom:100%;"/>
    </td>
  </tr>
</table>

其中红色正方形的一侧等于“＆amp; nbsp”的 width 。但我希望它等于“＆amp; nbsp”的 height ，我试过了：

<table border="1" style="position:relative;">
  <tr>
    <td style="font-size:144px">&nbsp
      <div style="position:absolute;top:0%;left:0%;background-color:red;height:100%;padding-right:100%;"></div>
    </td>
  </tr>
</table>

只是将“width”替换为“height”，将“padding-bottom”替换为“padding-right”，但似乎无法正常工作，有没有办法做到这一点？