Question

在下面的屏幕截图中，我们可以看到3个图标 - 其中2个尺寸相同，而其中一个（左图）看起来更大/不均匀。

这是我的HTML代码部分：

  <article class="number">
                          <div class="number__illu" style="margin-top: -33px">
                             <picture class="picture picture--no-background" style="padding-bottom: 146.875%"><img src="assets/images/svg/location-pointer.svg"></picture>
                          </div>
                          <h4>Header</h4>
                          <p>Part 1</p>
                       </article>

                       <article class="number">
                          <div class="number__illu" style="margin-bottom: -10px">
                             <picture class="picture picture--no-background" style="padding-bottom: 125.35%"><img src="assets/images/svg/world.svg"></picture>
                          </div>
                          <h4>Header</h4>
                          <p>Part 2</p>
                       </article>

                       <article class="number">
                          <div class="number__illu" style="margin-top: 14px">
                             <picture class="picture picture--no-background"><img src="assets/images/svg/users.svg"></picture>
                          </div>
                          <h4>Header</h4>
                          <p>Part 3</p>
                       </article>

这是随之而来的CSS部分：

.about__section__numbers .number {
margin: 30px auto;
text-align: center
}

.about__section__numbers .number__illu {
max-width: 100px;
margin: 0 auto 10px
}

我不明白为什么左边的图标比其他图标大。

Answer 1

您在每个元素上都有不同的填充和边距。删除它可能会帮助您更好地排除故障。

尝试调试样式，如* {outline：1px solid red;帮助您查看盒子的大小是否正确。

或者你也可以尝试图片，图片{display：inline-block}

Answer 2

这是因为图像的高度与高度不同。您应该将高度设置为特定的像素高度，以使它们看起来大小相同。

或者您可以人为地在较大图标的两侧添加空白区域，使其与其他两个图标具有相同的原生宽度。

HTML / CSS图标大小

2 个答案: