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