Is it legal to nest inline-block?

Question

Is this valid HTML/CSS?

<div>
  <div style="display:inline-block; border:1px solid red">
    <div style="display:inline-block; padding:5px">Test</div><br />
    <div style="display:inline-block; padding:5px">Test</div>
  </div>
</div>

i.e. is it considered OK to nest one inline-block inside another? I'm guessing not!

It looks like the answer is _yes_. See [here](https://stackoverflow.com/questions/15936336/inline-block-element-nested-in-another-inline-block-element-has-an-offsettop#answer-15936705)... — War10ck, Aug 16 '18 at 14:25
css display and HTML semantic tags do not mix. nested div is valid and it has no semantic meaning. div is a neutral block where span is a neutral phrasing block. No matter if you reset display. Avalid HTML structure remains valid Use https://validator.w3.org/ to be sure — G-Cyrillus, Aug 16 '18 at 14:27
You can also check the validation of your code here https://validator.w3.org/#validate_by_input — Huangism, Aug 16 '18 at 14:30
Hi Quentin/Huangism - I assumed you wouldn't be able to nest inline blocks as I know you can't nest a block inside an inline element. — PapillonUK, Aug 16 '18 at 14:36
yes, it's possible. But in your snippet I see a `br` tag ! im wondering why you use it as long as you can simply change the `display` into `block` ? — ThS, Aug 16 '18 at 14:37
ths - because I assume it IS illegal to nest a block (div) inside an inline element. — PapillonUK, Aug 16 '18 at 14:38
@PapillonUK You can put a block inside an inline element with CSS. `

...

` is totally valid. — Mr Lister, Aug 16 '18 at 14:38
As a short answer to your main question: Yes you can nest inline-block elements. But I suggest you learn more about the behaviour of each display property value(as block, inline, flex, table...) So seeing some inline-block elements preceded by a `br` looks strange though. — ThS, Aug 16 '18 at 14:41
ths - I agree, that's what bought me to ask this question! It is invalid HTML to nest a block element inside an inline element but as C-Cyr is hinting at above, it seems you're allowed to do that using CSS since HTML will only validate against the div. — PapillonUK, Aug 16 '18 at 14:50
@PapillonUK By the way, those elements are no longer referred to as block and inline elements. They do have `display:block` and `display:inline` by default, but that is not important to the HTML content model. They are not _defined_ by their CSS properties. So inline elements, for instance, are now "phrasing content" elements; see http://w3c.github.io/html/dom.html#kinds-of-content — Mr Lister, Aug 17 '18 at 06:14

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

Quote from html validator:

Cases where the default styles are likely to lead to confusion:

Certain elements have default styles or behaviors that make certain combinations likely to lead to confusion. Where these have equivalent alternatives without this problem, the confusing combinations are disallowed.

Examples:

1- <div> inside <span> (block inside inline element)

2- <textarea> inside <button>

If you consider inline-blocks either block or inline element by default, there would be no confusing behavior if you nest inline inside inline or block inside block. The only confusing combination is a block inside the inline element.

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 16 '18 at 14:54

Ali Sheikhpour

10,475
5
41
82

Thanks Ali - I'll mark as the answer since there are plenty of knee-jerk comments - and a mark-down(!) but no-one willing to commit an answer. The link you reference specifically suggests that nesting a block element in an inline element is invalid HTML - I would think that demanding the same from the CSS parser could also lead to confusion - something some of the commenters don't seem to have considered at all. – PapillonUK Aug 16 '18 at 15:40
Please note that your second example is disallowed for a different reason than the first one! – Mr Lister Aug 16 '18 at 20:44

Is it legal to nest inline-block?

1 Answers1