1. The difference between inline elements and block-level elements
1. Inline elements will not occupy the entire line and are arranged in a straight line. They are all on the same line, arranged horizontally;
Block-level elements will occupy one line, arranged vertically.
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 and height settings for inline elements are invalid (line-height can be set), and the margin up and down is invalid. , padding up and down is invalid.
2. Conversion of inline elements and block-level elements
Conversion of inline elements For block elements: display:block;
Block elements are converted into inline elements : display:inline;
##3. Question extension
Question description: Why can the width and height of inline elements such as img and input be set?
Detailed answer:
Elements are the basis of the 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
b) Inline elements
Inline elements do not form a new content block, that is, there can be other elements around them, such as , , 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 , , 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, which 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 related articles on the difference between inline elements and block-level elements, please pay attention to the PHP Chinese website!