如何在不增大宽高至100px的情况下实现小型圆形Div（CSS）

我希望将Div设置为圆形，同时保持它的“小型”状态，无需将width和height增大至100px。当前计算器的按钮效果如图所示：

当前使用的CSS代码如下：

.contas div {
    color: white;
    display: inline-block;
    border: 0;
    width: 40px;
    border-radius: 100%;
    text-align: center;
    padding: 10px;
    margin: 20px 4px 10px 1px;
    cursor: pointer;
    background-color: #202020;
    transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}

问题原因 #

当前按钮无法呈现正圆，核心原因是元素宽高不相等：width设为40px，加上左右padding各10px，总宽度为60px；而高度由内部文字高度加上上下padding决定，通常会小于60px，最终呈现椭圆形状。要实现正圆，必须保证元素宽高完全一致。

解决方案 #

方案一：使用aspect-ratio（推荐） #

aspect-ratio: 1/1可以强制元素保持1:1的宽高比，不管width设置多少，都会自动调整高度匹配宽度，轻松实现正圆，同时保持小型尺寸。改用inline-flex还能更稳妥地实现文字水平垂直居中：

.contas div {
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    width: 40px;
    aspect-ratio: 1/1; /* 核心：强制宽高1:1 */
    border-radius: 100%;
    padding: 10px;
    margin: 20px 4px 10px 1px;
    cursor: pointer;
    background-color: #202020;
    transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}

方案二：兼容旧浏览器（使用box-sizing） #

如果需要兼容不支持aspect-ratio的旧浏览器，可以用box-sizing: border-box将padding纳入宽高计算范围，同时固定宽高数值一致，确保元素为正方形，再配合border-radius: 100%实现正圆：

.contas div {
    color: white;
    display: inline-block;
    border: 0;
    width: 40px;
    height: 40px; /* 固定宽高一致 */
    box-sizing: border-box; /* 让padding包含在宽高内，避免总尺寸变大 */
    border-radius: 100%;
    text-align: center;
    line-height: 20px; /* 文字垂直居中：40px总高度减去上下padding各10px */
    padding: 10px;
    margin: 20px 4px 10px 1px;
    cursor: pointer;
    background-color: #202020;
    transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}

内容的提问来源于stack exchange，提问作者angelollima