Pure space directly inside div ignored, but pure space directlyinside span honored

29/03/2008, 04h13

i found that there is a rule regarding "pure space" directly inside a
block element or directly inside an inline element. For the following
example, in compliance strict mode:

<body>

<div>

hello
world

</div>

<div>

<img src="pic.jpg">
<img src="pic.jpg">

</div>

</body>

there are tons of spaces after the first <div>, and they are the
newline and space characters. But none is honored. None is rendered.
(I think they are stored in the DOM tree, but it is just not rendered
on the displayed, because they are directly inside a block element).
Also between the two <div></div> ... <div></div> there are tons of
spaces in the "..." region, but none is rendered. And the same goes
for spaces before the first <img> tag and after the second <img> tag.
(i tested using a body width of 300px, with two images of width 150px,
and the spaces after the second <img> is not causing any vertical
enlargement of div area if i set a visible border on the div. to see
both images on the same line in this case, the <img> tags will need to
be side by side, without any space or newline in between)

So the rule is, any pure space directly inside a block element is
ignored when the browser displays it, it would seem.

Now, when the anonymous inline begins, such as in the case of "hello"
and then "world", and in the case of the first <img> and the second
one, since it begins an anonymous inline element, any pure space in
between will be rendered.

That goes for newline, indentation by tab or space characters, etc.

And that's why we can freely indent the <div> with lots of spaces and
newline without any side effect.

This seems like the rule, applicable on IE7, Firefox 2, and Safari 3.
This being the general rule it seems, does the spec actually say
something about this?

29/03/2008, 10h53

On 2008-03-29, liketofindoutwhy@gmail.com <liketofindoutwhy@gmail.com> wrote:
> i found that there is a rule regarding "pure space" directly inside a
> block element or directly inside an inline element. For the following
> example, in compliance strict mode:
>
><body>
>
> <div>
>
> hello
> world
>
> </div>
>
>
>
> <div>
>
> <img src="pic.jpg">
> <img src="pic.jpg">
>
> </div>
>
>
></body>
>
> there are tons of spaces after the first <div>, and they are the
> newline and space characters. But none is honored. None is rendered.

It all gets collapsed to one space. Try setting white-space: pre on body
and you should see all your spaces.

[...]
> This seems like the rule, applicable on IE7, Firefox 2, and Safari 3.
> This being the general rule it seems, does the spec actually say
> something about this?

See CSS 2.1 16.6.1 which explains how white-space is collapsed.

29/03/2008, 04h13	#1
liketofindoutwhy@gmail.com Messages: n/a Hébergeur:	Pure space directly inside div ignored, but pure space directlyinside span honored i found that there is a rule regarding "pure space" directly inside a block element or directly inside an inline element. For the following example, in compliance strict mode: <body> <div> hello world </div> <div> <img src="pic.jpg"> <img src="pic.jpg"> </div> </body> there are tons of spaces after the first <div>, and they are the newline and space characters. But none is honored. None is rendered. (I think they are stored in the DOM tree, but it is just not rendered on the displayed, because they are directly inside a block element). Also between the two <div></div> ... <div></div> there are tons of spaces in the "..." region, but none is rendered. And the same goes for spaces before the first <img> tag and after the second <img> tag. (i tested using a body width of 300px, with two images of width 150px, and the spaces after the second <img> is not causing any vertical enlargement of div area if i set a visible border on the div. to see both images on the same line in this case, the <img> tags will need to be side by side, without any space or newline in between) So the rule is, any pure space directly inside a block element is ignored when the browser displays it, it would seem. Now, when the anonymous inline begins, such as in the case of "hello" and then "world", and in the case of the first <img> and the second one, since it begins an anonymous inline element, any pure space in between will be rendered. That goes for newline, indentation by tab or space characters, etc. And that's why we can freely indent the <div> with lots of spaces and newline without any side effect. This seems like the rule, applicable on IE7, Firefox 2, and Safari 3. This being the general rule it seems, does the spec actually say something about this?

29/03/2008, 10h53	#2
Ben C Messages: n/a Hébergeur:	Re: Pure space directly inside div ignored, but pure space directly inside span honored On 2008-03-29, liketofindoutwhy@gmail.com <liketofindoutwhy@gmail.com> wrote: > i found that there is a rule regarding "pure space" directly inside a > block element or directly inside an inline element. For the following > example, in compliance strict mode: > ><body> > > <div> > > hello > world > > </div> > > > > <div> > > <img src="pic.jpg"> > <img src="pic.jpg"> > > </div> > > ></body> > > there are tons of spaces after the first <div>, and they are the > newline and space characters. But none is honored. None is rendered. It all gets collapsed to one space. Try setting white-space: pre on body and you should see all your spaces. [...] > This seems like the rule, applicable on IE7, Firefox 2, and Safari 3. > This being the general rule it seems, does the spec actually say > something about this? See CSS 2.1 16.6.1 which explains how white-space is collapsed.

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email