CSS图标填充物在部分框外面溢出

Question

我刚刚开始使用CSS作为个人项目，我想在另一个侧面显示一个图标并对齐，我在字体上找到了其中一部分Aenter Code Herenother数据库中的其他。

问题是上面部分中的非字体可观图标填充溢出物。我仍然可以使用更多的填充来对齐它们，但是这样，设计不再响应，并且调整了它们的窗口大小。

这就是没有2.55％填充https://imgur.com/a/j4hno

的样子

在阅读了有关字体令人沮丧的默认填充后，我尝试将其重置但不起作用。

这是其中一个部分的CSS和HTML：

.one-fourth {
  width: 20%;
  float: left;
  text-align: center;
  color: #e0e0e0;
  background-color: #4fb3bf;
}
#python i {
  vertical-align: bottom;
  border: 3px solid red;
  padding-top: 2.55%;
}
.one-fourth i {
  color: #e0e0e0;
  max-height: 100px;
  font-size: 500%;
  padding: 13% 0 4%;
}

<section class="one-fourth" id="python">
  <td>
    <i class="icon-python"></i>
  </td>
  <h3>Python</h3>
</section>

Answer 1

摆弄值和各种函数，我发现唯一的方法是对齐不使用具有百分比值的填充的块，而是具有px值，因此而不是<</p>

#python{
    padding-top:2.55%;
}
.one-fourth{
    :padding-top:13%;
}

我必须使用

#python{
    padding: 34px 0 0;
}
.one-fourth{
    padding: 30px 0 20px;
}