Block-level element (block) features: Always exclusive to a row, represented as starting from another row, and the subsequent element must also be displayed in another row; inline element (inline) features: this is the same line as the adjacent inline element. Next we will introduce it in detail. If you are interested, refer
Block-level element (block) Features:
• A row is always exclusive and starts from another row, and the subsequent elements must be displayed in another row;
• Width, height, padding, and margin can be controlled;
Inline features:
• The same line as the adjacent inline element;
• Top/bottom (padding-top/padding-bottom) of width, height, and padding) and the top/bottom (margin-top/margin-bottom) of the outer margin cannot be changed, that is, the size of the text or image in it;
Block-level elements mainly include:
The Code is as follows:
Address, blockquote, center, dir, p, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul
Inline elements mainly include:
The Code is as follows:
A, abbr, acronym, B, bdo, big, br, cite, code, dfn, em, font, I, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup,
Textarea, tt, u, var
Variable element (determine whether the element is a block element or an inline element based on the context):
The Code is as follows:
Applet, button, del, iframe, ins, map, object, script
Block-level and inline element applications in CSS:
With CSS, we can get rid of the restrictions on HTML Tag classification in the above table and freely apply the attributes we need on different tags/elements.
The following three CSS styles are used::
• Display: block -- display as a block-level element
• Display: inline -- display as an inline Element
• Dipslay: inline-block -- display as an inline block element, displaying as a row, and modifying attributes such as width, height, and padding
We often
Add the display: inline-block style to the element. The original vertical list can be displayed horizontally.
Digress: I recently sorted out the knowledge about the differences between block-level elements and inline elements. I found a lot of related articles on the Internet and found that everyone's understanding seemed wrong. I personally tested them,
Found many problems:
1. The margin-left/margin-right and padding-left/padding-rigtht attributes of inline elements can be controlled, so the width of inline elements can be controlled through these four attributes.
2. you can also place block-level element labels inside the inline element, and the internal block-level element labels support large external inline labels, therefore, you can place block elements to control the height of inline elements (Inline elements can only be placed in text and other inline elements)
For example:
The Code is as follows:
Test
