Overview and differences between html inline elements and html block-level elements_HTML/Xhtml_Web page production

Block-level element (block) characteristics :
•Always occupy a separate line, which means starting on a new line, and subsequent elements must also be displayed on a new line;
•Width (width) , height, padding and margin can all be controlled;

Inline element (inline) properties :
• and adjacent Inline elements are on the same line;
• Width, height, top/bottom of padding (padding-top/padding-bottom) and top/bottom of margin (margin-top/margin -bottom) cannot be changed, that is, the size of the text or pictures inside;

The main block-level elements are :

Copy code

The code is as follows:

address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul

The main inline elements are :

Copy code

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

Mutable elements (whether the element is a block or inline element is determined based on context) :

Copy Code

The code is as follows:

applet, button, del, iframe, ins, map, object, script

CSS Application of medium block-level, inline elements :
Using CSS, we can get rid of the restrictions of HTML tag classification in the above table and freely apply the attributes we need on different tags/elements.

The main CSS styles used are the following three :
•display:block - displayed as block-level elements
•display:inline - displayed as inline elements
•dipslay:inline-block -- Displayed as an inline block element, displayed in parallel and can modify attributes such as width, height, inner and outer margins
We often add display:inline-block to the

element Style, the originally vertical list can be displayed horizontally.

Off-topic: I recently compiled some relevant knowledge about the difference between block-level elements and inline elements. I found a lot of related articles on the Internet and found that everyone’s understanding seemed to be wrong. I myself After testing it myself, I found a lot of problems:
1. The margin-left / margin-right and padding-left / padding-rigtht of inline elements can be controlled, so you can pass These 4 properties control the width of inline elements.
2. Block-level element tags can also be placed inside inline elements, and the internal block-level element tags will expand the external inline tags, so you can control the height of inline elements by placing block elements (online introduction The only thing is that inline elements can only hold text and other inline elements)
For example:


Copy code
Code As follows:



Test