HTML/CSSアイコンサイズ

Question

下のスクリーンショットでは、同じサイズの2つのアイコンが表示され、残りの2つのアイコンは1つ（左のアイコン）が大きく表示されます。

これは、このビットのための私の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 
} 

私はなぜアイコンが表示されません左の2つは他の2つよりも大きく見えます。

Answer 1

それぞれの要素に異なるパディングと余白があります。それを削除すると、トラブルシューティングに役立ちます。

* {outline：1px solid red;}のようなデバッグスタイルを試してください。 }ボックスのサイズが適切かどうかを確認するのに役立ちます。 {：インラインブロック表示}

Answer 2

画像は、その高さと比較して異なる幅を有するためにです

交互また、画像、画像を試みることができます。同じサイズに見えるように高さを特定のピクセルの高さに設定する必要があります。

他の2つのアイコンと同じネイティブの幅になるように、人工的に大きなアイコンの辺に空白を追加することもできます。