Block Level Elements Vs Inline Elements_html/css_WEB-ITnose

HTML elements can be divided into two types:

block level element (block level element)

inline element )

The difference between the two is as follows:

1. Block-level elements occupy one line (unless the display attribute of the modified element is displayed), and inline elements are displayed in one line;

2. Block-level elements can set width and height attributes, but setting these attributes for inline elements is invalid;

3. The default width of block-level elements is 100%, while the width of inline elements is based on their content or child elements.

Mutual conversion between the two:

Block-level elements??>Inline elements: display:inline; Inline elements??>Block-level elements: display:block;

The state between the two:

Set the display:inline-block; attribute to make the element appear as an inline element to the outside world, on one line Internally displayed; internally displayed as block-level elements, width and height attributes can be set.

Common block-level elements and inline elements

Block-level elements: div p h1 h2 h3 h4 h5 h6 dl ul ol li table hr (horizontal dividing line)

Inline elements: a img span input (input box) select (item selection) textarea (multi-line text input box) sub (subscript) sup (superscript)