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

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, e388a4556c0f65e1904146cc1a846bee and 45a2772a6b6107b401db3c9b82c049c2

are different, and 8e99a69fbe029cd4e2b854e244eab143 and e388a4556c0f65e1904146cc1a846bee 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 a1f02c36ba31691bcfe87b2722de723b 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 d5fd7aea971a85678ba271703566ebfd tag.

　(X)a1f02c36ba31691bcfe87b2722de723b, d5fd7aea971a85678ba271703566ebfd, 4750256ae76b6b9d804861d8f69e79d3, 221f08282418e2996498697df914ce4e, 273238ce9338fbb04bee6997e5552b95 in HTML are all replacement elements. These elements often have no actual content, that is, they are empty elements, for example:

<img src=”cat.jpg” />
　　<input type="submit" name="Submit" value="提交" />

The browser will display these elements according to the tag type and attributes of the element. Replaceable elements also generate boxes in their display.

b) Non-replaceable elements Most elements of (X)HTML are non-replaceable elements, that is, their content is directly displayed to the user. (e.g. browser). For example:

<p>段落的内容</p>

Paragraphe388a4556c0f65e1904146cc1a846bee is a non-replaceable element, and the text "content of the paragraph" is fully displayed.

　

2. Display elements In addition to the classification of replaceable elements and non-replaceable elements, there are other classifications of elements in CSS 2.1 Method: block-level elements (block-level) and inline elements (inline-level, also translated as "inline" elements).

　

a) Block-level elements The most obvious feature of elements that are visually formatted as blocks is that they are filled horizontally by default. The content area of ​​its parent element, and there are no other elements on the left and right sides of it, that is, block-level elements occupy one line by default.

Typical block-level elements are: e388a4556c0f65e1904146cc1a846bee, e388a4556c0f65e1904146cc1a846bee, 4a249f0d628e2318394fd9b75b4636b1 to 4e9ee319e0fa4abc21ff286eeb145ecc, and so on.

Elements that have been set to float (float attribute, can float to the left or right) through CSS and set the display attribute to "block" or "list-item" are block-level elements. .

But floating elements are special. Due to floating, there may be other elements next to them. And "list-item" (list item 25edfb22a4f469ecb59f1190150159c6) will generate a dot symbol or numeric sequence in front of it.

       

b) Inline elements Inline elements do not form a new content block, that is, there can be other elements around them, such as 3499910bf9dac5ae3c52d5ede7383485 , 45a2772a6b6107b401db3c9b82c049c2, 8e99a69fbe029cd4e2b854e244eab143, etc., are all typical inline-level elements.

　Elements whose display attribute is equal to "inline" are all inline elements. Almost all replaceable elements are inline elements, such as a1f02c36ba31691bcfe87b2722de723b, d5fd7aea971a85678ba271703566ebfd, etc.

However, the type of elements is not fixed. By setting the display attribute of CSS, inline elements can be changed into block-level elements, and block-level elements can also be changed into inline elements.

3. Conclusion:

Replacement elements generally have intrinsic dimensions, so they have width and height that can be set. For example, if you do not specify the width and height of img, it will be displayed according to its intrinsic size, which is the width and height of the image when it is saved.

For form elements, browsers also have default styles, including width and height.

For more information on the differences between inline elements and block-level elements in CSS, please pay attention to the PHP Chinese website!