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;：

使用padding: 15px;：

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;
  }
}