Making Span tag cover entire width of button

Question

I have the following structure:

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

I have the following CSS:

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

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

I have seen several posts regarding the "span taking the entire width of their parent" and the most popular answer was to make it display: block;

But in this case, it doesn't work. If you inspect, you will see that the span is taking 200px width instead of 216px width (width of button).

How can I fix this problem? Here is the fiddle

Answer 1

There is padding in your .wrap class. Set padding to 0 on your .wrap, .text declaration.

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

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