is <div style="display: inline"> identical to <span>?

There is often a discussion of

<div style="display: inline">

being able to make a block element into an inline element.

so is it true that

<div style="display: inline">
[any possible markup here...]
</div>

is *identical* to

<span>
[any possible markup here...]
<span>

and vice versa,

is <span style="display: block"> identical to a <div>?

please, if you could, indicate whether this is your opinion, like from
some years of experience, or whether there is a reference documenting
that it is true? thanks so much.

Summercool wrote:

There is often a discussion of

div style="display: inline"

being able to make a block element into an inline element.

so is it true that

div style="display: inline"
[any possible markup here...]
/div

is *identical* to

span
[any possible markup here...]
span

and vice versa,

is <span style="display: block"> identical to a <div>?

please, if you could, indicate whether this is your opinion, like from
some years of experience, or whether there is a reference documenting
that it is true? thanks so much.



They're not identical, because they are different elements which mean

different things. But they will probably display the same way, if
that's what you mean. Each has no default styles of its own, save
display mode which you have overridden in the div to match the span.

Check this portion of the W3 document on HTML structure:
http://www.w3.org/TR/html401/struct/global.html#h-7.5.4

which states,

"These elements define content to be inline (SPAN) or block-level (DIV)
but impose no other presentational idioms on the content."

That being said, why are doing this? If you want a generic inline
element, just use a span.

Jeremy

..oO(Summercool)

There is often a discussion of

div style="display: inline"

being able to make a block element into an inline element.

This is _never_ possible. A block-level element remains a block-level
element, regardless of the CSS rules you apply to it. CSS only affects
the rendering, it doesn't change the element type.

so is it true that

div style="display: inline"
[any possible markup here...]
/div

is *identical* to

span
[any possible markup here...]
span

and vice versa,

is <span style="display: block"> identical to a <div>?

No. The rendered result might look the same, but the elements are still
completely different and have to follow the rules of the DTD.

Micha

On Mar 17, 5:01 pm, Michael Fesser <neti... (AT) gmx (DOT) de> wrote:

No. The rendered result might look the same, but the elements are still
completely different and have to follow the rules of the DTD.

How about looking it this way: is there a case where a

<div style="display: inline">

would render differently than a <span>, or are they always the same?

The same goes for <span style="display: block"> -- is there a case it
can render differently than a <div>, or it is always the same?

On 2008-03-18, Michael Fesser <netizen (AT) gmx (DOT) de> wrote:

.oO(Summercool)

There is often a discussion of

div style="display: inline"

being able to make a block element into an inline element.

This is _never_ possible. A block-level element remains a block-level
element, regardless of the CSS rules you apply to it.

No, "block-level" is just a function of CSS properties.

CSS 2.1 9.2:

Block-level elements are those elements of the source document that
are formatted visually as blocks (e.g., paragraphs). Several values
of the 'display' property make an element block-level: 'block',
'list-item', and 'run-in' (part of the time; see run-in boxes [p.
120] ), and 'table'.

CSS only affects
the rendering, it doesn't change the element type.

Correct, but "block-level" doesn't mean the same as "member of %BLOCK in
the HTML DTD".

I don't think HTML specifications use the term "block-level". If they do
then it's even more confusing...

so is it true that

div style="display: inline"
[any possible markup here...]
/div

is *identical* to

span
[any possible markup here...]
span

and vice versa,

is <span style="display: block"> identical to a <div>?

No. The rendered result might look the same, but the elements are still
completely different and have to follow the rules of the DTD.

Yes this is still true.

On 2008-03-18, Summercool <Summercoolness (AT) gmail (DOT) com> wrote:

On Mar 17, 5:01 pm, Michael Fesser <neti... (AT) gmx (DOT) de> wrote:

No. The rendered result might look the same, but the elements are still
completely different and have to follow the rules of the DTD.

How about looking it this way: is there a case where a

div style="display: inline"

would render differently than a <span>, or are they always the same?

The same goes for <span style="display: block"> -- is there a case it
can render differently than a <div>, or it is always the same?

They can look different in theory.

In HTML 4, span can only contain members of the %inline group. So

<span><div>hello</div></span>

is invalid. The browser can do what it wants with it. For example it
might close the span before the div and reopen it after it. This would
mean that if you'd set span { color: red } for example, "hello" wouldn't
get it.

Having said that I haven't met a browser that doesn't just allow div
nested inside span as if there were nothing wrong with it.

<div style="display: inline"><div>hello</div></div>

is valid and should always do what you expect.

On Mar 18, 1:19 am, Ben C <spams... (AT) spam (DOT) eggs> wrote:

They can look different in theory.

In HTML 4, span can only contain members of the %inline group. So

span><div>hello</div></span

is invalid. The browser can do what it wants with it. For example it
might close the span before the div and reopen it after it. This would
mean that if you'd set span { color: red } for example, "hello" wouldn't
get it.

Having said that I haven't met a browser that doesn't just allow div
nested inside span as if there were nothing wrong with it.

div style="display: inline"><div>hello</div></div

is valid and should always do what you expect.

I am only guessing... since inline element cannot contain any block
element, it doesn't matter whether it is

<span><div>hello</div></span>

or

<div style="display: inline"><div>hello</div></div>

Both of them are considered invalid the same way. (since they are
inline element containing a block element)

On 2008-03-18, Summercool <Summercoolness (AT) gmail (DOT) com> wrote:

On Mar 18, 1:19 am, Ben C <spams... (AT) spam (DOT) eggs> wrote:

They can look different in theory.

In HTML 4, span can only contain members of the %inline group. So

span><div>hello</div></span

is invalid. The browser can do what it wants with it. For example it
might close the span before the div and reopen it after it. This would
mean that if you'd set span { color: red } for example, "hello" wouldn't
get it.

Having said that I haven't met a browser that doesn't just allow div
nested inside span as if there were nothing wrong with it.

div style="display: inline"><div>hello</div></div

is valid and should always do what you expect.


I am only guessing... since inline element cannot contain any block
element, it doesn't matter whether it is

span><div>hello</div></span

or

div style="display: inline"><div>hello</div></div

Both of them are considered invalid the same way. (since they are
inline element containing a block element)

No, that's the point.

Something that's display: inline can contain something that's display:
block. That's not invalid, and it is completely specified by CSS 2.1
what's supposed to happen (you'll get anonymous blocks either side of
the block).

CSS doesn't impose any requirements about what you can nest inside what.
Anything goes (although some properties may not apply in particular
situations).

But <span> cannot contain <div> according to HTML rules (the HTML DTD is
full of requirements about what you can nest inside what) and <div> can
contain <div>, regardless of what you've set display to.

<span><div>hello</div></span>

is invalid HTML but

<div style="display: inline"><div>hello</div></div>

is valid HTML, and correct CSS with defined behaviour. There is
absolutely nothing wrong with it (although it's rather odd style).

On 18 Mar, 10:10, Summercool <Summercooln... (AT) gmail (DOT) com> wrote:

I am only guessing... since inline element cannot contain any block
element, it doesn't matter whether it is

There are two sorts of "block/inline". One is about CSS and the
display property, the other refers to HTML, the DTD and the nesting
rules. For HTML, there are even two sorts of "block/inline": what
elements are a member of, and what they may contain (which is
frequently both). Look at <p> for an example of an element that's both
a member of %block;, yet can only contain %inline;

Most importantly in this context though, the CSS behaviour has _no_
effect on HTML validity. Otherwise you wouldn't be able to judge a
HTML document as valid in isolation, without knowing what stylesheets
might be applied to it!

div style="display: inline"><div>hello</div></div

This is valid.