CSS: Element types

Element classification

In CSS, tag elements in HTML are broadly divided into three different types: block elements, inline elements (also called inline elements), and inline block elements.

Block element

<div>, <p>,

Characteristics

• Each block-level element begins with a new row, and the subsequent element also starts another line.
• The height, width, row height, and top and bottom margins of an element can be set.
• The element width is not set, and is 100% of the parent container (and the width of the parent element), unless a width is set.

Inline elements are converted into block elements

/* Make a element a block element feature */a{   

Inline elements

<a>, <span>, <br>, <i>, <em>, <strong>, <label>, <q>, <var>, < Cite>, <code>

Characteristics

• And the other elements are on one line;
• The height, width and top and bottom margins of the element are not set;
• The width of the element is the width of the text or Picture it contains, and it cannot be changed.

Block elements converted to inline elements

/ * block element Div converted to inline element */div{     display:inline;    } ... < Div > became an inline element of my </div>

Inline block Element (Inline-block)

, <input>

Characteristics

• is the characteristics of inline elements and blocky elements.
• And the other elements are on one line;
• The height, width, row height, and top and bottom margins of an element can be set

Study Notes Reference:

Some of the core concepts of CSS

CSS Learning Notes

CSS: Element types