(Css Spec) Clarification on containing block definition
Guys I have a little question about containing block, By definition containing block is the nearest ancestor that is a block container(containing only block-level or inline-level boxes) or which establishes a formatting context but here in this code :
The spec says that the containing block for strong element is the second paragraph(id=p2), but if we follow the definition shouldnt the 'em' element be the containing block since it contains only inline-level elements therefore being the nearest block container? Anyone can enlighten me on this 🧐
18 Replies
Not sure I understand the question, but
<em> is an inline element & you're saying it has to be block?No, em here have inline elements in it which are all inline and by definition it should have been the containing block of the strong element but in the spec it doesnt say that, they consider the paragraph #p2 to be it's containing block.
Here's the link to the spec : https://www.w3.org/TR/2016/WD-CSS22-20160412/visudet.html
at the very start until the example
yes cause <p> is the parent containing block
by changing the position of em to absolute* it would become a block
and then it would be the containing block
Not sure why you are reading the specs but seems a convoluted way to learn >.>;; least for me. Just make sure you understand block/inline. As well as parent/child relationships.
yeah agreed but shouldnt em be the containing block in the first place instead of the p2 for the strong element?
no because its inline
fun experiment for ya ... make <em style="display:block;">
and you will see what happens to that <p>
ok let me test
or even the <strong> do both seperately
that might help break the glass for ya.
Ok I see but inline elements can be block containers,right so this means it theres only inline elements in it it can be containing block or am I missing something?
no inline elements cannot be block containers
ohhh like regular one cant and only few specific like inline-block,etcc... I thought it was all of them
the next block ancestor would be the containing for a bunch of inline elements.
Ok got it, what confused me was this from the spec:
And so I assumed that all inline can be block containers
yea idk I don't get hung up on stuff like that
I just ignore it
>.>;;
Learn behavior by using not reading, is more my way.
Ok I see thx again for the little push, that’s true I’m giving too much attention to this
yea way to much attention imo
Already built some projects so thought it was a good idea to see what’s happening inside
Just make sure you learn Grid (learn it before Flex if you can lol, but def don't stop with Flexbox)
Grid for layout is 2023 happy path >.>;;
Ok got it, I’m already good with flex and grid is next on the list