CSS:为什么这些响应方块不是完全正方形？

Question

我正在尝试制作一个可调整大小的正方形网格,里面有一些文字.这是代码:

/* Dirty quick CSS reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-flow: column;
  flex: 1;
  background: aliceblue;
}

.row {
  display: flex;
  flex: 1;
}

.square {
  border: 1px solid black;
    
  width: 14.2857%; /* 100% / 7 */
  font-size: 18px;
  padding: 8px;
  
  /* square-width - font-size - padding-top */
  padding-bottom: calc(14.2857% - 18px - 8px);
}

<div class="container">
  <div class="row">
    <div class="square">1</div>
    <div class="square">2</div>
    <div class="square">3</div>
    <div class="square">4</div>
    <div class="square">5</div>
    <div class="square">6</div>
    <div class="square">7</div>
  </div>
</div>

我们可以看到,有一排正方形可以适应窗户的大小.问题是,如果我们检查它们,我们会发现它们不是完全正方形(它们比宽度高3px).如果我们增加它会变得更糟font-size,据我所知,数学是正确的.

这里发生了什么？为什么我会获得这些额外的像素？

Answer 1

准确的计算应该是 ( 14.2857% - 8px - 2px - Lpx) 我们删除了 和padding-toptheborder和line-height(不是 ) font-size，所以你应该知道 的值line-height或者你设置它：

/* Dirty quick CSS reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-flow: column;
  flex: 1;
  background: aliceblue;
}

.row {
  display: flex;
  flex: 1;
}

.square {
  border: 1px solid black;
    
  width: 14.2857%; /* 100% / 7 */
  font-size: 18px; 
  line-height:1em; /*equal to font-size*/
  padding: 8px;
  
  /* square-width - font-size - padding-top */
  padding-bottom: calc(14.2857% - 8px - 2px - 18px);
}

<div class="container">
  <div class="row">
    <div class="square">1</div>
    <div class="square">2</div>
    <div class="square">3</div>
    <div class="square">4</div>
    <div class="square">5</div>
    <div class="square">6</div>
    <div class="square">7</div>
  </div>
</div>

如果我们参考文档，则该line-height值定义了线条的高度，默认值设置为normal：

CSS 的 line-height 属性设置行（例如文本）所使用的空间量。

和

普通的

取决于用户代理。桌面浏览器（包括 Firefox）使用大约 1.2 的默认值，具体取决于元素的字体系列。

如您所见，line-height不一定等于font-size