html - 使用 :before psuedo element to create Div height in responsive grids

Question

我想使用网格系统来显示大量图标。我从博客中了解到这一点并将代码放在 JSFiddle 中.我已经使网格系统响应 JSFiddle 示例，但我不明白两件事。

首先，如果我将 :before 伪元素的 padding-top 设置为 120% 或 60%，高度会发生变化，但是由于在其他任何地方都没有指定高度，所以这个高度的函数是什么？它与字体大小或其他因素有关吗？它似乎与屏幕尺寸不成比例。

此外，如果我从 CSS 中删除 margin-bottom : 2% 选择器，整个网格系统将失去它的比例并且容器的高度变得更大且不稳定。这是为什么？

HTML 是

<div class="container">
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>

<div class="gap"></div>
<div class="gap"></div>
</div>

和CSS

.container
{
    text-align : justify ;
    font-size : 0 ;
    background-color : #C0C0C0 ;
    padding : 2% 2% 0
}

.container:after
{
  content : '' ;
  display : inline-block ;
  width : 100%
}

.icons
{
  display : inline-block ;
  text-align : center ;
  margin-bottom : 2% ; 
  width : 49% ;
  background-color : blue 
}

.icons:before
{
  content : '' ;
  display : inline-block ;
  padding-top : 60%
}

.gap
{
  display : inline-block ;
  width : 49%
}

Answer 1

1. 边距/填充百分比 is calculated from the element width .
2. 如果删除边距，高度不会改变。这些元素都放在一起，所以看起来很高。