This is a stripped-down version of a single section of Grok TiddlyWiki, optimized for fast loading and readability by search engines. Some features are missing.

For the full Grok TiddlyWiki experience, please visit the wiki version of this page.

Ltc:SpanInlineMode

20th January 2021 at 6:39pm

It would be more correct to say that <div> elements participate in a block formatting context, while <span> elements participate in an inline formatting context. The context is how each element itself is laid out with respect to its neighbors. But the element's content is laid out in a different context, which means it might not use the same layout mode! For instance, <span> elements may contain elements which will be laid out in a block context, despite themselves being laid out in an inline context (this is generally not a good idea, but it does work).

You can see this in the following example, where a paragraph (a block element) is nested inside of a span (an inline element) which also contains some raw text. The span containing the paragraph is shown in orange for clarity:

<span>Here's an adjacent span.</span>
<span style="color: orange;">My first line, directly inside the span.
<p>Here is a paragraph nested inside of the span.</p>
Here is another line directly inside the span.</span>
<span>Here's an adjacent span.</span>

Here's an adjacent span. My first line, directly inside the span.

Here is a paragraph nested inside of the span.

Here is another line directly inside the span. Here's an adjacent span.

This is unlikely to be something you need to worry about when writing in wikitext, though, unless you are trying to create complex custom stylesheets to format your tiddlers.