HTML tags (elements) can be divided into two categories, namely block-level elements and inline elements (also called inline elements).
1. Inline elements (inline)
1. The concept of inline elements
Inline element (a concept in the HTML specification) English: inline element, which has many Chinese names, such as: inline element, inline element, inline element, inline element, etc. Basically there is no unified translation. In addition, when it comes to inline elements, the attribute usually involved is display:inline; this attribute can fix the famous IE double floating border problem.
2. Characteristics of inline elements
① On the same line as adjacent inline elements;
②The width (width), height (height), top/bottom of the inner margin (padding-top/padding-bottom) and top/bottom of the outer margin (margin-top/margin-bottom) cannot be changed;
③The width is the width of its text or picture and cannot be changed.
④Inline elements can only accommodate text or other inline elements
When using inline elements, you need to pay attention to the following points:
• Setting width width is invalid;
• Setting height height is invalid, but line height can be set through line-height;
• Margin can be set, but it is only effective for the left and right margins, not the top and bottom;
• When setting the padding inner margin, only the left and right padding is valid, while the top and bottom padding is invalid. It should be noted that the range of the element is increased, but it has no effect on the content around the element;
• You can switch an element between an inline element and a block-level element through the display attribute.
3. Common inline elements in HTML tags
2. Block-level elements (block)
1. The concept of block-level elements
Block element (block element), and its corresponding inline element (inline element), are concepts in the HTML specification. The basic difference between block elements and inline elements is that block elements generally start on a new line, and adjacent block-level elements will be displayed on different lines.
2. Characteristics of block-level elements
①Always occupy one line, which means starting on another line, and the subsequent elements must also be displayed on another line;
②Width, height, padding and margin can all be controlled;
③If the width of the block-level element is omitted, its width defaults to the width of the current browser window;
④Block-level elements can contain other inline elements and block-level elements.
3. Common block-level elements in HTML tags