Quote:
Originally Posted by sourcejedi
1. Even after re-fixing my test environment so my SPANs were actually displayed as block elements, I still see the mystery that a single BR at the end of the display:block SPAN has no effect. This is exactly what I want, but I can't rely on it unless I know why.
|
It's been a while since I seriously tried to grok the finer points of CSS+HTML interaction, but I
think this has to do with the box model and how it's supposed to handle collapsing vertical margins, especially on the generic flow elements that were introduced post-CSS1.
A <br> inside a <span> counts as part of the <span>, and when you display: block it, it's included inside the new block box boundaries and can only "stack" according to default new display: block rules, which say 1 linebreak, no extra space unless declared elsewhere in the CSS.
So a single <br> creates a linebreak, which is "folded" inside the linebreak created when the <span> becomes a block, and sort of squishes into just the one linebreak as they stack directly on top of one another.
Whereas a <br> outside the <span> adds an extra, because it's like a wedge stuck in between the new blocks, providing new linespace.
You can see this exact same effect with plain <div>s. A single <br> inside the <div> will not increase the linespace separating the <div>s, but more than one will, as will one outside.
Quote:
Originally Posted by sourcejedi
4. That's pretty much everything you could do to get text-ident to work, but what about other properties? How about using negative margins on inline boxes:
|
I'm not sure what your code is trying to accomplish here? You've effectively set all the <span>s to outdent by 2em, but I don't really see the use of this unless you're trying to offset pushed-in regular text and outdented poetic text?
For a classic hanging indent with just the first line outdented, I think you'd either have to use a :first-child pseudo-selector on .basic-poetry > p, or just mark up the first lines of each stanza or poem (depending on how you want it to look) with a new class to target. Possibly you might be able to use negative values on text-indent (which is supposed to be a block-level style) on the <p> and just push in the .basic-poetry block entirely and skip applying a margin to the <span>s, if that's what you want to achieve.
Quote:
Originally Posted by sourcejedi
If I want to copy a few short verses into an email to a friend, copy+paste will only see the selected HTML, right? It's not guaranteed to see the CSS that sets margins for each stanza.
|
In this case, I would go with <p>s for containing and visually separating the separate stanzas, and <div>s for keeping each line individual, as well as a <div> as a whole-poem container*. Less breakage that way, because if the CSS styling doesn't get copy-pasted, <span>s are going to collapse into single lines without the <br>s to separate them, display: block or no.
Hope this helps.
* It's a flow element, so go with the flow†…
† I will refrain from making a "use the Source, Luke…" joke here.