Span padding
Why the words that come before the span is covered by the span padding and background here is the word "paragraph" is covered but the words that comes after the span is not covered by the span padding and background and appears over it?
9 Replies
😮 never seen that before lol
spans are an inline element, so things like height/width don't work (or margin top and bottom), and padding is only visual.
As for why it's below that text, but above the other text, it's because that text comes later, so it's "higher". Layering in CSS tends to work that way, unless you add z-index into the picture.
But I'm not using any position properties so why the z-index comes into play or how does this layering works I don't fully get it
everything the browser renders has to be layered in some way. If you aren't using z-index in any way, earlier elements are always "below" later elements.
When you make a span, the text before and after that span get wrapped in an anonymous box, and the same rules apply. The box before the span is below the span, the box after the span is layered above it.
Normally we don't see any of this layering, because elements don't tend to overlap, but when they do, if we haven't used z-index, the later things are always on top of earlier things.
(also, don't worry about what an anonymous box is)
Well now that does make sense, thanks alot Kevin❤️ ❤️
Wait that actually makes so much sense, its just like how rendering using the canvas API the last code always renders above the previous geometries.
Never thought that much about it.. 😄
I guess there will always be something new to learn in CSS:thumbup: