Why is a block level element contained inside an inline block level element displayed as inline?

Question

I created a fiddle to demonstrate the question: https://jsfiddle.net/vanillasnake21/bf0j0v5L/

<a>
  <span> close </span>
</a>

The tag <a>matters display:inline-block, but <span>- display:blockwhen <span>not enclosed in the tag <a>, it covers the entire width of the page, as I would expect a block-level element should. When enclosed with a tag as shown above, it just looks like it is displayed as inline, although exploring it in dev tools still shows it as a block element. Why does this happen and why does not <span>cover the entire width of the element <a>?

Answer 1

span, . . , 100% .

inline-block width, , inline-block. , width inline-block , span .

a {
  display: inline-block;
  padding: 1em 7em;
  width: 400px; /* define some width here to the parent */
  background-color: green;
}

span {
  background-color: red;
  display: block;
}
a{
  display: inline-block;
  padding: 1em 7em;
  width: 400px;
  background-color: green;
}

<a>
  <span> close </span>
</a>

Hide result

span , , width .

---

box-sizing padding width: 100%; .

span {
  background-color: red;
  display: block;
}
a{
  display: inline-block;
  box-sizing: border-box;
  padding: 1em 7em;
  width: 100%;
  background-color: green;
}

<a>
  <span> close </span>
</a>

Hide result

2

---

, .