[webkit-dev] Question on Inline element

[Eric Seidel]

On Thu, May 12, 2011 at 10:52 PM, Mustafizur Rahaman
<mustaf.here at gmail.com>wrote:

> So my question is
>
>    - Can a paragraph element contain an image element=> the html spec does
>    not say NO.
>
> Yes.  There are two specs at play here.  HTML and CSS. Ignore anything
prior to HTML5 as it was proscriptive rather than descriptive and does not
match what browsers and web authors actually use!   <image> (aka <img>) is
just an inline element.  (Like span or b or i, etc.) and flows with inline
children per the CSS spec.  (See CSS 2.1).  So Paragraph, which is a block,
can contain as many inline children as its little heart desires.  <img>
happens to be a "replaced" element, so it has intrinsic size (again see CSS
2.1).  Inline children (with the exception of inline blocks, which are
blocks which flow as inlines) CANNOT contain box children (blocks are
boxes), so for example <span><p></p></span> would be invalid and cause a
special type of craziness called a "continuation", where the spans inline
contents are split in two, wrapped in anonymous blocks, and the two
anonymous wrappers and the P are all children off the parent instead of the
P being a child of the span.


>
>    - If we make the image element neither float/nor positioned, it creates
>    an anomynous block & everything is rendered properly. But I am not sure
>    whether that is the right approach.
>
> Images will only end up getting wrapped in anonymous blocks when they're in
a block with other box children.  For example:

<div><img><div></div></div> will cause the <img> to get wrapped in an
anonymous block.

This is due to he CSS rule that blocks may contain either all inline
children OR all box/block children.  Thus since it has one block child (the
<div>) the img has to get wrapped in an anymous block to keep with the rule.
http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level


>
>
> Can any one please throw some light here & help us out.
>
> Thanks.
>
>
>
>
> _______________________________________________
> webkit-dev mailing list
> webkit-dev at lists.webkit.org
> http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20110513/11503800/attachment.html>