Set the Span tag to the full width of the 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 saw several posts regarding the "range spanning the entire width of their parent" and the most popular answer was to make it display: block;

But in this case it will not work. If you check, you will see that the range is 200px wide instead of 216px wide (button width).

How can I fix this problem? Here is the fiddle

Answer 1

There is a complement in your .wrap class. Set padding to 0 in the .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;
}