CSS Text Gutter高度调整求助：如何实现固定宽自适应正方形

嘿，我完全懂你现在的困扰——明明想做一个固定宽度的自适应正方形，可不管怎么调span或div的margin、padding，元素的垂直高度就是降不下来，看起来总是过高。别着急，我来给你拆解问题并提供靠谱的解决方案。

问题根源分析 #

你调margin和padding没用，大概率是因为这两个属性没法从根本上让元素的高度和宽度成1:1比例：

• 如果是span这类行内元素，垂直方向的margin/padding本身就不会完全影响容器的高度；
• 如果元素里有文本，默认的line-height也会额外撑开高度，光调边距自然没用。

最可靠的自适应正方形实现方法 #

想要固定宽度且高度自适应成正方形，最经典的技巧是利用padding百分比基于宽度计算的特性，具体代码如下（适配Less写法）：

.fixed-width-square {
  width: 200px; /* 这里设置你需要的固定宽度 */
  position: relative;
  background: #ccc; /* 加个背景方便直观看到效果 */
  
  &::before {
    content: "";
    display: block;
    padding-top: 100%; /* 关键：padding-top取100%，高度会等于父元素宽度 */
  }
  
  /* 用来承载内容的容器 */
  .square-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px; /* 内容的内边距在这里调整，不会破坏正方形比例 */
    box-sizing: border-box;
    line-height: 1.2; /* 根据内容设置合适行高，避免额外撑开高度 */
  }
}

对应的HTML结构可以这么写：

<div class="fixed-width-square">
  <div class="square-content">
    <!-- 这里放你的内容，比如文本、图标 -->
    我是正方形里的内容
  </div>
</div>

为什么这个方法有效？ #

CSS里的padding-top/padding-bottom百分比值，是基于元素的宽度来计算的。当你设置padding-top:100%时，伪元素的高度会正好等于父元素的宽度，从而把父元素撑成完美的正方形。之后用绝对定位把内容放在里面，既不会破坏正方形比例，又能正常展示内容。

额外注意点 #

1. 如果你的元素是span这类行内元素，一定要先把它改成块级或行内块级（display: block/inline-block），否则宽高设置会无效；
2. 用box-sizing: border-box可以让内容的padding不会额外增加元素尺寸，保证正方形比例不受影响。

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