为什么包含在内联块级元素内的块级元素显示为内联？

Question

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

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

The <a> tag is set to display:inline-block and the <span> is display:block , when the <span> is not enclosed by the <a> tag it spans the entire width of the page as I would expect a block level element should. When enclosed with the a tag as shown above it just looks like it's being displayed as inline even though examining it in dev tools still shows it as a block element. Why does this happen and why doesn't the <span> span the entire width of the <a> element?

Answer 1

There's no place for your span element to take the entire width of the page. Technically, you are rendering a block level element inside an inline block element. So your block level element does take 100% of the parent width.

Since there is no width defined for the parent inline-block , it takes whatever space it gets inside the inline-block element. To demonstrate this, if I assign some width to the inline-block element of yours, the span will take all the available width of the parent element.

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> 

Demo

Here, your span takes all the width it gets as you have assigned a width to your parent inline-block element.

---

Another example, added box-sizing to count the padding inside the element, and appended width: 100%; to the parent element.

 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> 

Demo 2

---

Note that rendering a block level element inside an inline block element will not force the parent element to take all the available horizontal space on the document.