Css 为什么当父项为按钮时，子项在FF中溢出父项的左填充？

当button的子项溢出button本身时，它们通常会向右移动，但在FF中，它们会突然向左移动。我怎样才能防止这种行为？这是一只臭虫吗

示例HTML：

<button class="test"><span class="child"></span><span class="child"></span></button>

---

示例：

因为您有空白：现在父框上的RAP看到它溢出底部，因为没有足够的水平空间容纳两个框问题是为什么它溢出到左侧！，不在右边。我已经知道，我可以使用子元素的边距而不是父元素的填充，但我想要的正是父元素的填充，因为在这种情况下，我可以使用父元素的内容框大小调整的优点。您必须调查FF的按钮元素，它的行为与div不同。我猜它的默认值可能是内联块。框大小实际上对FF中的按钮没有影响，因为有框和没有框看起来都一样

.test {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: none;
  background: red;
  white-space: nowrap;
  padding: 10px;
  text-align: left;
}

.child {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid green;
  background: blue;
}