简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > CSS Tutorial > body text

An introduction to the difference between inline elements and block-level elements in css

高洛峰
Release： 2017-03-06 11:24:30
Original
1735 people have browsed it

This article mainly introduces the difference between inline elements and block-level elements, which has a good reference value. Let’s take a look at it with the editor

1. The difference between inline elements and block-level elements Difference

　1. Inline elements will not occupy the entire line, but will be arranged in a straight line. They are all on the same line and arranged horizontally;

　Block-level elements will occupy one line and be arranged vertically. arrangement.

　2. Block-level elements can contain inline elements and block-level elements; inline elements cannot contain block-level elements.

　3. The difference between the attributes of inline elements and block-level elements is mainly due to the box model attributes. The width set for inline elements is invalid, the height is invalid (line-height can be set), the margin up and down is invalid, and the padding up and down is invalid.

2. Conversion between inline elements and block-level elements

Inline elements are converted into block elements: display:block;

Block elements are converted into Inline elements: display:inline;

3. Problem extension

Problem description: Why can the width and height of inline elements such as img and input be set?

Detailed answer:

Elements are the basis of document structure. In CSS, each element generates a box (box, also translated as "box") that contains the content of the element. But different elements will be displayed differently. For example,

and

are different, and and

are also different. Different types are specified for different elements in the document type definition (DTD), which is one of the reasons why DTD is important to documents.

　1. Replaceable and non-replaceable elements

From the characteristics of the element itself, it can be divided into replaceable and non-replaceable elements.

　a) Replacement element

Replacement element means that the browser determines the specific display content of the element based on its tag and attributes.

For example, the browser will read the image information and display it based on the value of the src attribute of the tag, but if you view the (X)HTML code, you cannot see the actual content of the image; another example Determine whether to display an input box, radio button, etc. based on the type attribute of the tag.

　(X), ,