In-line elements and box elements in HTML

Defined

The traditional block-level element definition simply illustrates the formation of a block in the document flow, with the addition of lines in front and back, which is somewhat general. In fact, the box element refers to the macro on the box element, it consists of 3 types: 1. Block-level element 2.dispaly is set to Class block 3. The inclusion of some elements forces them to form block-level elements. The first 2 classes are relatively easy to understand, and the 3rd class will explain later for example.

And, the inline element also refers to the macro on the inline elements, categorized as above.

Note that the above block-level elements and inline elements are not in the table, if joining table will result in a lot of anonymous block-level elements or anonymous inline elements, not to mention that the layout is now very few table.

Example

1, for block-level elements, the first 2 classes do not have to give examples, belong to the normal situation, then the third kind of concrete what is the situation?

1) All child elements of a block-level element are block-level elements

  <Div>    <P>This is P1</P>    <P>This is P2</P>    < Section>This was section</ Section>  </Div>

Then the P and section below the Div are each on one line. Normal display.

2) block-level elements contain block-level elements and anonymous text

<div>
Some
<p>this is p</p>
Text
<p>this other p</p>
<span>this is span</span>
Other text
</div>

According to the official statement, "If a block container box (such as, generated for the DIV above) have a block-level box inside it (such as the P above), then we the it to has only block-level boxes inside it. "However, this is not the case, only anonymous text elements around block blocks will produce block-level effects, such as the Some and Text is displayed as block-level elements, and two other text is displayed as inline elements.

3) inline elements contain block-level

 p{Display:inline;}  span{Display:block;}  <  p  >   some  <  em  >  this is Emem  >  <  span  >  this is Span</ span  >   text  </ p  >  

The above some and this isem appear on one line, thisis span and text each row. If a line is inside

2, the element in the line only describes the third case

Reference: Http://www.w3.org/TR/CSS21/visuren.html#containing-block

In-line elements and box elements in HTML