Html 使用内联块创建完美正方形

我想知道是否有一种方法可以使用

display:inline block

创建一个完美的正方形，原因是我想把它放在文本旁边，例如

.legend{
显示：内联块；
颜色：rgba（0,0,0,0）；
宽度：1米；
背景颜色：浅蓝色；
}

D
一些传说

这很简单。将高度添加到

。图例

.legend{
显示：内联块；
颜色：rgba（0,0,0,0）；
宽度：1米；
高度：1em；//只需添加这一行
背景颜色：浅蓝色；
}
您也可以简单地指定div的高度。考虑以下事项：


/*容器需要相对定位*/
.集装箱{
位置：相对位置；
}
/*这个传说是绝对定位的，但与它的位置有关
*容器。
*我们还应用了一个常见的技巧，将其放置在图形的垂直中心
*其父对象：将顶部边界定位在父对象高度的50%。
*然后变换位置，将其向上移动其自身高度的50%。
*/
.传奇{
显示：内联块；
颜色：rgba（0,0,0,0）；
宽度：1米；
高度：1米；
背景颜色：浅蓝色；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
}
/*这个div决定了整个物体的高度。
*由于图例是以绝对方式定位的，因此我们需要
*通过将此div移到右侧（左边距）为其留出空间
*/
.图例文本{
左边距：1米；
填充物：5px；
显示：内联块；
}

D
一些传说
如何添加高度：1米，太好了？好吧，如果possible@A.Lau为什么？是否希望正方形在直线上垂直居中？如果您将宽度设置为
1em
，那么完美正方形的相应高度无疑是
1em
，因为您会注意到它略微浮离地板。看看它有没有高度，你会注意到一个小小的差别。@a.Lau你当然可以随心所欲地定位正方形。我更新我的答案。代码中的注释将解释我的意思。@A.Lau嘿，你是否按照我的建议尝试将正方形居中？我宁愿使用默认的线高度，或者至少匹配itokay，这样你就可以固定线高度，并相应地调整宽度