HTML inline elements and block-level elements

1. Description of inline elements and block elements

According to the CSS specification, each page element has a display property that determines the type of the element, and each element has a default display property value, such as a DIV element, whose default display property value is "block", which becomes a "chunk-level" element ( Block-level), and the default display property value for the span element is "inline", which is called the inline element. Div such a block-level element, will automatically occupy a certain rectangular space, you can set the height, width, internal and external margins and other properties to adjust the appearance of the rectangle, in contrast, like "span" "a" such as the line element, there is no independent space, it is attached to other block-level elements exist, therefore, Setting the height, width, inner and outer margins of the inline element is not valid.

2. In-line, block-element differences:(1). Block-level elements will be exclusive to a row, its width automatically fills its parent element width of the row elements will not be exclusive row, the adjacent rows of elements will be arranged in the same row, know that a row can not be wrapped, will wrap, its width varies with the content of the element (2).  In general, block-level elements can be set width, height property, inline element set width, height is invalid (note: block-level elements, even if the width is set, is still exclusive line) (3). Block-level elements can set margin and padding. The padding-left,padding-right,margin-left,margin-right of the horizontal direction of the element in the row produces a margin effect, but the vertical direction of the Padding-top,padding-bottom, Margin-top,margin-bottom does not produce a margin effect. (The horizontal direction is valid, the vertical direction is invalid) 3. Inline, block elements:

Block element

* Address-addresses
* BLOCKQUOTE-Block reference
* Center-align Block
* DIR-List of directories
* Div-Common block-level easy, is also the main tag of CSS layout
* DL-Definition List
* Fieldset-form control Group
* Form-Interactive form
* H1-Big title
* H2-Subtitle
* H3-3 level Title
* H4-4 level Title
* H5-5 level Title
* H6-6 level Title
* HR-Horizontal divider Line
* Isindex-input Prompt
* menu-List of menus
* Noframes-frames Optional content, (for browsers that do not support frame, display this chunk content
* NoScript-Optional script content (this content is displayed for browsers that do not support script)
* Ol-Sort Form
* P-Paragraph
* Pre-formatted text
* Table-form
* ul-Non-sorted list

Inline elements (inline element)

* A-Anchor point
* ABBR-abbreviation
* Acronym-First word
* B-Bold (not recommended)
* Bdo-bidi Override
* Big-Large font
* BR-line break
* Cite-citation
* Code-computer code (required when referencing the source)
* DFN-Define Fields
* EM-emphasis
* Font-typeface settings (not recommended)
* I-Italic
* img-Images
* Input-Enter box
* KBD-Define keyboard text
* Label-table label
* Q-Short reference
* S-Medium dash (not recommended)
* Samp-Define sample computer code
* Select-Project selection
* Small-Small font text
* span-a common inline container that defines chunks within a text
* Strike-Medium dash
* Strong-Bold Emphasis
* Sub-subscript
* SUP-Superscript
* TEXTAREA-multi-line text input box
* TT-Telex text
* U-Underline
* var-Define Variables

Variable element

A mutable element is a block element or an inline element that determines whether the element is in context.
* Applet-java Applet
* Button-Buttons
* Del-delete text
* Iframe-inline Frame
* INS-Inserted text
* Map-image block (map)
* Object-object Object
* Script-client-side scripting

Transferred from: https://www.cnblogs.com/Jackie0714/p/4923639.html

HTML inline and block-level elements