ReactJS：<footer/>の内部の埋め込み方法は？

Question

私はpinkbox.pngという名前のピンク色のボックス画像を持つ白い背景のフッターを持っています。パディングなしでは、ピンクのボックスイメージは左上隅にあり、フッターの境界線に接触します。

しかし、それらの間にスペースを作成するには、パッディングを行い、ピンクボックスが内側に押し込まれますが、内側にピンクボックスイメージを押すのではなく、水平スクロールバーが表示されます。

何が問題になりますか？

#footer { 
    background-color: white; 
    z-index: 100; 
    display: flex; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
//was trying to do padding: 15px; here 

    .pink-box { 
    width: 15; 
    height: 15; 
    } 
} 

そして、私のコンポーネントで：

render(){ 

    return(
     <footer id="footer"> 
     <img 
      className="pink-box" 
      src="/img/pinkbox.png" 
     /> 
     </footer> 
    ) 
    } 

padding:15px;なし：

で

ここ

コードがあるありがとう210：

Answer 1

これは動作するはずです...

#footer { 
    background-color: white; 
    z-index: 100; 
    display: flex; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
    padding: 15px; 
    box-sizing: border-box; 

    .pink-box { 
    width: 15; 
    height: 15; 
    } 
}