Question

出于某种原因，我应该将按钮的显示属性设置为flex。我有一个span作为按钮的子元素（我知道在按钮内部有一个跨度但仍然用来克服某些限制并不是标准做法）。我注意到跨度需要0.5px顶部和右侧缩进。检查这是否是因为将按钮显示为flex，但令我惊讶的是，即使按钮显示为块/内联块项目，跨度也会缩进。压痕没有规则的模式（有时在 - 顶部/底部/左/右）。如果开始放大/缩小缩进消失。我已经覆盖了按钮的所有默认浏览器样式，但问题仍然存在。

这是HTML＆amp;我正在使用的CSS -

button {
  
  border: 2px solid #000; 
  padding: 0;
  display:flex;
  margin:30px;
  box-sizing:border-box;
  height: 100px;
  width:300px;
 text-shadow:none;
  box-shadow:none;
  box-shadow:none;
  text-shadow:none;
  outline:0;
  }

button span{
  background:orange;
  width:300px;
  height:100px;
 flex:1 1 auto;
  padding:0;
  color:#000;
  margin:0;
  outline:0;
}

<button type="button"><span>button[type="button"]</span></button>

PS：Chrome＆amp; Edge（Surface Pro 4，Windows 10）

花了3个多小时才发现问题但徒劳无功。任何人都可以解释为什么这个问题造成的？

按钮中的Flex项目会进行不必要的缩进

0 个答案: