From the *webcake* guy ...

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
The difference between 'block' and 'inline'.
HTML comes in two basic types; Block and Inline.  You can put inline
stuff into a block, you can  put a block inside another block; you can
put inline stuff into other inline stuff, but you can never, ever, put
BLOCK stuff into INLINE stuff.  Blocks always start themselves on a new
line whereas inline elements just continue along the same line.

(Here it comes.)
It's like a sandwich. You can put anything into a sandwich, even another
slice of bread, but you try to put the BLT[1] on the outside and the
bread inside, things get messy.

So, what do you reckon. I figure I'm either orally fixated or just a

[1]Bacon, Lettuce, Tomato.
[2]Aussie for 'over-eater'. As distinct from 'gutsy', which denotes

Re: From the *webcake* guy ...

Joe wrote:

Quoted text here. Click to load it

Sure you can. SPAN is a classic inline element, and DIV is a classic block

Go validate:

        This is some text. Let's start an <span>inline
            A bit of trickery with OBJECT.
            <div>This is allowed here!</div>
        And don't forget to close our </span>
        The end.

Toby A Inkster BSc (Hons) ARCS
Contact Me  ~

Re: From the *webcake* guy ... says...
Quoted text here. Click to load it
well sure - and you can put the vegemite on the outside of your
sandwich, too. That doesn't mean it's a good thing to do every time.

Re: From the *webcake* guy ...

Joe (GKF) wrote:

Quoted text here. Click to load it

The problem with that is that you're (reasonably) categorised two
values that apply to three distinct properties and (unreasonably)
described these as a single property.

"HTML elements have a 'type' [block / inline]" is a useful intermediate
step as a tutorial because it introduces the concept of these distinct
states. However it's only a crude approximation - the element actually
has a "type that it is", a "types it can contain" and a "CSS display
behaviour" (which is easily changed by CSS).  If you teach this concept
as the single property applying to all, then you have to make it clear
pretty soon afterwards that you've used  a simplification, then to
explain further.

I use this simple explanation in teaching courses, but I wouldn't use
it on a web page without expanding it properly further down that same
page. In particular note that the HTML behaviour is fixed by the DTD,
but that the CSS behaviour is flexible. This is why we make complex
inline lists from <li> ("block elements") and making them look like
inline, rather than by taking already-inline <span>s and squeezing
invalid block elements into them.

Toby's somewhat pathological case of "bizarre nesting via object" is
IMHO not such a big deal. It's genuine, but sufficiently rare that I
wouldn't worry about that one.

Re: From the *webcake* guy ... says...
Quoted text here. Click to load it

Absolutely agree on all points. <li> is a hybrid in any case. I use it
to show that the sandwich analogy doesn't always apply.
Quoted text here. Click to load it
Toby's a clever guy. You just have to know when to take him seriously.
Quoted text here. Click to load it

Site Timeline