Css 如何使内联div中的文本成为完美的正方形

我有密码：

<div>C</div><div>A</div>

div{
            border: 4px solid Brown;
display: inline;
}

CA
div{
边框：4倍纯色棕色；
显示：内联；
}

最后我得到了两个矩形，里面有字母

我希望它们显示为正方形。所以现在它们是长方形，比宽的要高

---

有人知道如何设置它们的样式，使它们成为完美的正方形吗？

由于字母高于宽度，您必须手动设置框的高度。

由于字母高于宽度，您必须手动设置框的高度。

您必须将显示设置为

内联块，以便您可以指定明确的宽度和高度：

div{
显示：内联块；
宽度：1.25em；
高度：1.25em；
线高：1.25em；
}

这里是小提琴：
您必须将显示设置为
内联块
，以便您可以指定显式宽度和高度：

div{
显示：内联块；
宽度：1.25em；
高度：1.25em；
线高：1.25em；
}

这是小提琴：
如果不给它们一个相同的宽度和高度，就不可能精确，但是试试：

div {
  border: 4px solid Brown;
  display: inline;
  padding:2px 5px;
  margin:1px
}

如果您使用
内联
只是为了将
div
并排排列，那么我建议使用
浮点
并使
div
不
内联
。通过这种方式，您可以为它们指定一个明确的
宽度
和
高度

div {
  border: 4px solid Brown;
  padding:2px 5px;
  margin:1px; 
  float:left
}

请参见此处的演示：
如果不给它们相同的宽度和高度，则不可能精确，但请尝试：

div {
  border: 4px solid Brown;
  display: inline;
  padding:2px 5px;
  margin:1px
}

如果您使用
内联
只是为了将
div
并排排列，那么我建议使用
浮点
并使
div
不
内联
。通过这种方式，您可以为它们指定一个明确的
宽度
和
高度

div {
  border: 4px solid Brown;
  padding:2px 5px;
  margin:1px; 
  float:left
}

请参见此处的演示：
我知道的更好的方法是固定高度和宽度，同时使用内联块显示来实现这一点

试试这个：

div{
    display: inline-block;
    height: 1em;
    width: 1em;
    border: 4px solid Brown;
    line-height: 1em;
    text-align:center
}
​

我知道的更好的方法是固定高度和宽度，同时使用内联块显示来实现

试试这个：

div{
    display: inline-block;
    height: 1em;
    width: 1em;
    border: 4px solid Brown;
    line-height: 1em;
    text-align:center
}
​

难道你不喜欢显示：内联块吗？它几乎总能以某种方式解决我所有的css问题：）难道你不喜欢
显示：内联块
？它几乎总能以某种方式解决我所有的css问题：）