XHTML+CSS Basics (ii): block elements and inline elements

There are 91 HTML elements in the standard, which can be divided into blocks (block element) and inline elements (inline element).

Block elements are typically container elements of other elements, and block elements generally start from a new line, which can hold text, inline elements, and other blocky elements, and can be sized by the width and Height properties.

Common block elements are div, p, table, H1~H6, UL, OL, Li, DL, DT, DD, center, form.

The form element is special, because the XHTML specification stipulates that it can only accommodate block elements.

Inline elements are non-blocky elements that can hold only text or other inline elements, not exclusive lines, and the width and Height properties do not work on them.

Common inline elements are a, span, IMG, input, select, Strong, textarea, label.

1. How do I get multiple block elements in the same row?

In a page layout, there are a number of situations where it is necessary to make more than one block element appear on the same line, so we need to use the floating concept.

Floating (float:left;float:right;) allows a block element to move left and right from the normal flow of the document until its outer edge touches the edge of the containing box or another floating box, and the normal flow of the document behaves as if the floating box does not exist.

More about floating will be explained in the following, as long as the use of floating can be used to make a number of block elements in the same row can be.

<div style= "Width:100px;height:100px;float:left;background:yellow;" > Layer One </div>

<div style= "Width:100px;height:100px;float:left;background:pink;" > Layer Two </div>

In the above code, if the width of the two layers is added less than the width of the outer container, it will be displayed in one line.

2. How do I make the width of the inline element work?

There are two ways to make the width and height of an inline element work:

<a style= "Width:100px;height:100px;float:left;background:blue;" > Link One </a>

The inline element above is displayed as a block element in the Web page and floats to the left, which is also true for other inline elements.

<div style= "Width:100px;height:100px;float:left;background:black;" > Layer Three </div>

<a style= "Width:100px;height:100px;float:left;background:yellow;" > Links Two </a>

The inline element above applies a float, but it does not appear as a block element, because floats are also applied in the previous layer, need to be clear:both, and the float is cleared before the following inline elements are displayed in block form.

<a style= "Display:block;width:100px;height:100px;background:grey;" > Links Three </a>

The inline element above applies display:block, which enables inline elements to be displayed as block elements.

XHTML+CSS Basics (ii): block elements and inline elements