The types of html elements can be mainly divided into block-level elements, inline elements, and inline block elements, which correspond to their respective display attributes, block, inline, and inline-block.
HTML tags are set with corresponding display attribute values by default, for example
Block-level elements: elements with display:block set by default
<div>、<h1>~<h6>、<p>、<ul>、<ol>、<li>等
Inline elements/inline elements: elements with display:inline set by default
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<span>等
Inline block elements: elements with display:inline-block set by default
<img/>、<input/>、<td>等
The types of various elements also have various characteristics.
1. There are line breaks before and after (it has its own line);
2. The height, width, and inner and outer margins can be freely controlled in all directions;
3. The default width is 100% of the parent container;
4. Inline elements, inline block elements or block-level elements can be placed inside; (block-level elements cannot be placed inside text labels)
It can be seen that the three boxes are all block-level elements. Regardless of whether their width is set or whether they occupy the parent box, they will occupy an exclusive line. Setting the height and width of a2 are valid; setting the inner and outer margins of a3 is also valid.
Characteristics of inline elements:
1. There are no line breaks before and after (adjacent inline elements are on one line, and one line can have multiple inline elements, but there are gaps between them (you can set a negative margin value to solve the problem, and the set size varies from browser to browser));
2. The set width and height have no effect. The size of the element is determined by the text within the element; the vertical margin is invalid, but the horizontal one is valid; both vertical and horizontal padding are valid (vertical padding is valid, but not Open the surrounding boxes)
3. Only text or inline elements can be placed in inline elements; (block-level elements can be placed in the a tag)
It can be seen that when the width of the parent container allows, adjacent inline elements are on the same line, and there is a gap before them; b2 sets the width and height but it does not work, and b3 sets a negative left margin to solve the problem of inline Element gap problem; b4 sets the top and bottom margins but it doesn’t work (it’s still close to the block-level element a); b5 sets the top, bottom, left and right 2px padding but it works (the vertical padding does not separate b5 and a spread open )
Features of inline block elements:
1. There are no line breaks before and after (adjacent inline elements are on one line, and one line can have multiple inline elements, but there are gaps between them (you can set a negative margin value to solve the problem, and the set size varies from browser to browser));
2. The default width is determined by the content; the width and height can be set, which will override the default width;
3. Margin and padding in all directions are valid
You can see that the inline block elements are also in the same line, and there is a gap before; c2 sets the width and height to be valid, c3 sets the left margin with a negative value to solve the gap problem; c5 sets the top and bottom margins to be valid; c6 sets The padding of 5px on the top, bottom, left and right is effective.
C4 and c6 do not have a top margin set, but because they are on the same line as c5 with a top margin set, they are also separated from the block-level box a above.
By the way, both floating elements and elements in the flex container have the characteristics of inline block elements (no gaps between elements)!
You can see that you can set the height and width, internal and external margins, and float elements on the same line if the width of the parent element allows. There is no gap between them by default.