Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is block level element contained inside inline-block level element displayed as inline?

Tags:

html

css

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?

like image 968
Tim Akgayev Avatar asked Jul 15 '17 14:07

Tim Akgayev


People also ask

Can we have a block level element in an inline element?

Note: An inline element cannot contain a block-level element!

What would be a reason to set an element to display inline-block?

An inline-block elements will respect a width . People used to¹ build column layout systems with inline-block , because it basically can do what floats could do here, except without the need to worry about clearing the float², allowing people to take advantage of wrapping which happens a bit more elegantly than float.

What is the difference between block level and inline level elements?

Block elements always start from a new line. Inline elements never start from a new line. Block elements cover space from left to right as far as it can go. Inline elements only cover the space as bounded by the tags in the HTML element.

What does it mean to display inline vs inline blocks?

Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.


1 Answers

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.

like image 175
Mr. Alien Avatar answered Sep 25 '22 23:09

Mr. Alien