What are the CSS inline elements? The difference between CSS block-level elements and inline elements

Many CSS beginners in the CSS inline elements and CSS block-level elements, it may be easy to confuse, then, this article will explain to you CSS inline elements and block-level elements of what? and the difference between CSS block-level elements and CSS inline elements.

What is the definition of CSS block-level elements in the previous article? What are CSS block-level elements? We introduce the block-level elements of CSS separately, so we won't say much here-let's go directly to the CSS inline elements.

Inline elements in CSS (line element)

CSS inline elements are also called inline elements, and inline elements are generally based on the semantic level (semantic) of the basic elements, can only accommodate text or other inline elements, common inline element "a". For example, the SPAN element, the display:inline of the IFRAME element and the element style are all inline elements. such as text such elements, each letter is arranged horizontally, to the right end of the automatic folding line.

Features of CSS inline elements:

1, you can and other elements in a row, do not have to start another line.

2. The height, width and top and bottom margins of the element are not set.

3, the width of the element is that it contains the text, the width of the picture, can not be changed.

After introducing the CSS inline elements, let's take a look at what the CSS inline elements are.

What are the CSS inline elements?

Common CSS Inline elements:

A: Anchor point ABBR: Abbreviation Acronym: First word B: Bold (not recommended) Bdo:bidi Override Big: Large Font BR: Line break Cite: Reference Code: Computer codes (required when referencing source) DFN: Defining fields EM: Emphasize Font: Fonts settings (not recommended) I: Italic IMG: Pictures Input: Enter box

KBD: Defining keyboard text Label: Table Label Q: Short Reference S: Medium dash (not recommended) SAMP: Defining sample computer code Select: Project Selection Small: Small font text Span: A common inline container that defines chunks within a text Strike: Medium Dash Strong: Bold Emphasis Sub: subscript SUP: Superscript TEXTAREA: Multi-line text input box TT: Telex text U: Underline

Next, let's look at the difference between CSS block-level elements and CSS inline elements.

The difference between CSS block-level elements and CSS inline elements

One of the differences between CSS block-level elements and inline elements:

Block-level elements: block-level elements are exclusive to one row, and by default the width is automatically filled with the width of its parent element.

Inline elements: Inline elements do not have a single row, and adjacent inline elements are lined up in the same row. Its width changes depending on the content.

The effect is as follows:


Two differences between CSS block-level elements and inline elements:

Block-level elements: block-level elements can be set to a wide height.

Inline elements: Inline elements cannot be set to a wide height.

Instance:


The effect is as follows:


NOTE: block-level elements, even if they are set to a width, are exclusive rows.

The three differences between CSS block-level elements and inline elements:

Block-level elements: block-level elements can be set margin,padding.

Inline elements: margins and padding, such as Margin-left and padding-right, can produce margin effects in the horizontal direction of the elements in the row.

Instance:


The effect is as follows:


Note: Inline elements, such as Padding-top and Margin-bottom, do not produce margin effects in the vertical direction.

The difference between CSS block-level elements and inline elements is four:

Block-level elements: block-level elements correspond to display:block.

Inline elements: inline elements correspond to display:inline.

Finally, a property: Display:inline-block; You can have elements that have block-level elements and attributes of inline elements: you can set the length-width, allow padding and margin to take effect, and side-by-line with other inline elements. is a very useful property.

Description: You can toggle inline and block-level elements by modifying the display properties of an element.

The article ends here too, if you want to know more CSS block-level elements and the difference between the elements in the line, you can go to the PHP Chinese Web CSS Video Tutorial section to see the video.