block element and inline element inline element_css/html

An inline-level element (inline-level Element) attempted to insert a block-level (block-level Element) element. It is not allowed to do so. The only exception that can insert block-level elements in inline elements is the object label. So what are the inline-level elements (inline-level Element) and block-level (block-level element) elements?

Block elements are generally container elements of other elements, and block elements generally start with a new row, which can hold inline elements and other block elements, and common block elements are paragraph tags ' P '. "Form" is a special block element that can only be used to accommodate other block elements.

If there is no CSS, the block elements will be sorted sequentially in the same way each time the other row. With CSS, we can change the HTML default layout pattern and place the block elements where you want to go. Instead of being stupid every time you start another line. It should be noted that table tags are also one of the block elements, table based layout and CSS based layout from the general user (excluding visually impaired, blind, etc.) in terms of these two layouts, in addition to the page load speed difference, no other difference. But if ordinary users inadvertently view the page source code button, the difference between the two is very large. Based on the concept of good refactoring design CSS layout page source code, at least can let the general users without web development experience to quickly read the content. From this perspective, CSS layout code should have a better aesthetic experience.

You can imagine a block container element div as a box, or it's easier to understand if you play a scrapbook. We first cut the articles we need from all kinds of newspapers and magazines. Each cut is a block. Then we put the pieces of paper back on a blank new piece of paper, in accordance with our own layout intent. This creates your own unique Digest Express. As an extension of technology, Web layout design follows the same pattern.

Inline elements (inline element) are generally basic elements based on semantic level (semantic). Inline elements can only hold text or other inline elements, often inline element "a".

Block elements (blocks element) and inline elements (inline element) are concepts in the HTML specification. The basic difference between block elements and inline elements is that block elements generally start with a new row. When CSS control is added, the difference between block elements and inline elements is not the same. For example, we can simply add inline element cite to the attribute such as Display:block, so that he also has properties that start from the new line at a time.


The basic concept of a mutable element is that he needs to determine whether the element is a block element or an inline element based on the context relationship. A mutable element is still a class of two elements, and once the context determines his class, he follows the rule limits of the block element or inline element. General classification of the elements see the full text.

PS: About the inline element in Chinese, there are a variety of inline elements, embedded elements, inline elements, direct-type elements. Basically there is no unified translation, love how to call it. In addition to the inline element, we would think that there is a display property that is display:inline; This property fixes the famous IE double floating boundary problem.

Chunk elements (block Element)
* Address-addresses
* BLOCKQUOTE-Block reference
* Center-align block in lift
* Dir-directory list
* Div-Common block-level easy, but also the main tags 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 to display this block content
* NoScript-) optional script content (for browsers that do not support script to display this content)
* OL-sorting forms
* P-Paragraph
* Pre-formatted text
* Table-Tables
* 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 Wrap
* cite-references
* Code-Computer codes (required when quoting source)
* DFN-Define Fields
* EM-emphasis
* Font-fonts set (not recommended)
* I-Italic
* img-Pictures
* Input-Enter box
* KBD-Define keyboard text
* Label-table label
* Q-Short reference
* S-underlined (not recommended)
* Samp-Define sample computer code
* Select-Project selection
* Small-Small font text
* span-commonly used inline container, definition text block
* Strike-underline
* Strong-Bold accent
* Sub-subscript
* SUP-Superscript
* TEXTAREA-multi-line text input box
* TT-Telex text
* U-Underline
* var-Define Variable

Variable element
A variable element determines whether the element is a block element or an inline element, depending on the context context.

* Applet-java Applet
* Button-Buttons
* Del-delete text
* Iframe-inline Frame
* INS-Inserted text
* Map-image block (map)
* Object-object Object
* Script-Client scripting