使Span标签覆盖整个按钮宽度

Question

我有以下结构：

<div class="top">
  <button class="wrap">
    <span class="text">Hello</span>
  </button>
 </div>

我有以下CSS：

.top{
  background-color:yellow;
  width: 216px;
  height: 70px;
}

.wrap, .text{
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

我已经看过几篇关于＆＃34; span的帖子占据了他们父母的整个宽度＆＃34;而最受欢迎的答案是将其display: block;

但在这种情况下，它不起作用。如果检查，您将看到跨度为200px宽度而不是216px宽度（按钮宽度）。

如何解决此问题？这是fiddle

Answer 1

.wrap类中有填充。在.wrap，.text声明中将填充设置为0.

.top {
  background-color:yellow;
  width: 216px;
  height: 70px;
}

.wrap, .text {
  padding: 0px;  //set padding to 0px
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}