Mix of elements in block level elements
This is from the section of the course “Inline formatting context & anonymous boxes” from the module “Unknown Fundamentals: formatting context”.
“When we have a block level element, it can either contain other block level elements, or inline elements. It cannot contain a mix of them”.
But from what I have been learning, it appears a block level element, (such as a div), can contain both other block level elements & inline elements simultaneously. Is anyone here familiar with this?
13 Replies
r u sure this is what was ment?
perhaps the person ment, it can contain other block level or inline elements. meaning it can contain elements which can be block or it can be inline
Can a div (block level element) contain a span (in-line level element)? Or will the Block formatting context convert it to a block level element?
if u have a div and u put a span inside it, the span will stay as an inline element
similarly if u put a div in a div, the child div stays a block element
That’s what’s causing me confusion. According to the quote I gave from the course, it seems to say a block element (ie. a div) can’t contain an in-line element (ie. a span).
Ok so here is an example:
<div>
<p>This is a block level element.</p>
<span>This is an in-line level element.</span>
</div>
So in this example, there is a mixture of both a block level element (the p tag) & an in-line level element (the span tag).
So if this is possible, it feels like it is contradictory to the quote:
“When we have a block level element, it can either contain other block level elements, or inline elements. It cannot contain a mix of them”.
that's why i told u, u might be hearing it wrong
probably the person ment in a diff way and u r getting it wrong
can share the part where the person said it?
The was quote I shared is from Kevin in the CSS course.
The idea that block level elements can contain both block level elements as well as inline level elements simultaneously seems to be correct from my own experience plus from many of the examples I’ve seen. For example, I can create a div with both a p tag & a span. Unless the browser is doing something under the hood to covert them all to one type of element?
Which css course? CRL?
The CSS Demystified one.
hm, I haven't followed that one yet, but I'm wondering if the quote is missing context. Maybe for a certain type of layout, you can't have a mix because it will mess up? I'm not sure honestly.
If you check the course materials, there should be instructions on how to get the discord role that gives you access to the course channels for Demystified
Thank you! I actually assumed I had access to all the server channels. I was wondering why there wasn’t one specifically for the course.
I’m wondering if the context is about block formatting context vs inline formatting context
That could potentially be it. Maybe he just worded it incorrectly without realizing it. 🤔
Most likely as he knows you can mix block and inline (and inline-block, inline-flex etc) together in one element. I know for a fact in videos KPow has used spans or buttons or images in block level divs so it must have been the way it was worded.
So just know , you can definitely mix in-line and block level elements. In many cases we are turning them into the other (reset for img to display: block as one example ) anyway.