CSS inline element block element replaces element non-replacement element and the width height margin padding property of these elements

One, the width height of the various elements of the margin padding characteristics (specific CSS elements of the points to see two) 1. Block-level elements

width, height, margin four directions, padding Four directions are normal display, follow the standard CSS box model. Example: div

2. In-line replacement elements

width, height, margin four directions, padding Four directions are normal display, follow the standard CSS box model. For example: img

2. Inline non-replacement elements (emphasis)

Width, height does not work, with line-height to control height.

padding function, the upper and lower does not affect the row height, but for the background color and the inner margin of the inline non-replacement elements, the background can extend up and down the element, but the row height does not change. So the visual effect is to overlap the previous lines. ("CSS authoritative guide" P249)

Margin plays a role, and it does not work, because: the margin of a non-replacement element in the row does not change the row height of an element (CSS authoritative guide P227).

Ii. Classification of CSS elements

1. Replacement and non-replaceable elements

From the characteristics of the elements themselves, can be divided into replacement and non-replaceable elements.

a) Replace element

The replacement element is that the browser determines the specific display of the element based on the tag and attributes of the element.

For example, the browser will read the image information and display it according to the value of the SRC attribute of the tag, and if the (X) HTML code is viewed, the actual content of the picture is not visible;

Another example: Depending on the Type property of the <input> tag, whether the input box is displayed, the radio button, and so on.

X , <input>, <textarea>, <select>, <object> in HTML are all replacement elements. These elements often have no actual content, that is, an empty element, and the browser displays the elements based on their tag type and attributes. The replaceable element also generates a box in its display.

b) Non-replaceable elements

X Most elements of HTML are non-replaceable elements, meaning that their content is displayed directly to the client (for example, a browser). Paragraph <p> is a non-replaceable element, the text "paragraph content" is all displayed.

2. Display elements

In addition to the classification of replaceable and non-replaceable elements, elements in CSS 2.1 have different classifications: block-level elements (block-level) and inline elements (Inline-level, also translated as "inline" elements).

A) block-level elements

The most obvious feature of an element that is visually formatted as a block is that it fills the content area of its parent element horizontally by default, and there are no other elements on either side of it, that is, block-level elements are exclusive by default.

Typical block-level elements are:<div>, <p>,

The float (float property, float left or right) is set by CSS, and the setting display property for "block" or "List-item" is a block-level element.

However, floating elements are special, and because of the float, there may be other elements next to them. The "List-item" (list item <li>) generates a dot symbol, or a number ordinal, in front of it.

b) in-line elements

Inline elements do not form new chunks of content, that is, they can have other elements around them, such as <a>, <span>, <strong>, and so on, are typical inline-level elements.

Elements with the display property equal to "inline" are all inline elements. Almost all of the replaceable elements are inline elements, such as , <input>, and so on.

However, the type of the element is not fixed, by setting the display property of the CSS, you can make the inline element into a block-level element, or you can make the block-level element into an inline element.