Block element block element and inline element inline element_CSS/HTML

An attempt was made to insert a block-level element into an inline-level element. This is not allowed. The only exception to the possibility of inserting block-level elements into inline elements is the object tag. So what are inline-level elements and block-level elements? .

Block elements are generally container elements for other elements. Block elements generally start on a new line. It can accommodate inline elements and other block elements. A common block element is the paragraph tag 'P'. The "form" block element is special. It can only be used to accommodate other block elements.

Without the function of css, the block elements will be arranged one row at a time. After using CSS, we can change the default layout mode of this HTML and place the block elements where you want. Instead of stupidly starting a new line every time, it should be pointed out that the table tag is also a block element. First, from the perspective of ordinary users (excluding visually impaired people, blind people, etc.), there is no other difference between table based layout and css based layout except for the difference in page loading speed. But if it is ordinary. After the user inadvertently clicks the view page source code button, the difference between the two is very large. The CSS layout page source code designed based on good reconstruction concepts can at least allow ordinary users without web development experience to view the content. Quickly understand. From this perspective, CSS layout code should have a better aesthetic experience.

You can imagine the block container element div as a box, or if you have played with clipping. If so, it will be easier to understand. We first cut out the required articles from various newspapers and magazines. The content of each cut is a block, and then we use glue to rearrange these pieces of paper according to our own layout intention. Paste onto a new blank piece of paper. This creates your own unique digest. As an extension of the technique, web layout design also follows the same pattern.

Inline elements ( Inline elements are generally based on basic elements at the semantic level. Inline elements can only accommodate text or other inline elements. The common inline element "a".

Block element and inline element are both concepts in the HTML specification. The basic difference between block elements and inline elements is that block elements generally start on a new line. When CSS control is added, this attribute difference between block elements and inline elements no longer becomes a difference. For example, we can add an attribute such as display:block to the inline element cite, so that it also has the attribute of starting from a new line every time.


The basic concept of a variable element is that it needs to determine whether the element is a block element or an inline element based on the context. Variable elements still belong to the above two element categories. Once the context determines its category, it must follow the rules of block elements or inline elements. See full text for rough element classification.

ps: Regarding the Chinese name of inline element, there are many kinds of inline elements, inline elements, inline elements, and inline elements. Basically there is no unified translation, just call it whatever you want. In addition, when talking about inline elements, we will think of a display attribute called display:inline; this attribute can fix the famous IE double floating border problem.

block element
* address - address
* blockquote - block quote
* center - alignment block
* dir - directory list
* div - Commonly used block levels are easy and are also the main tags of css layout
* dl - Definition list
* fieldset - form control group
* form - Interactive form
* h1 - Big title
* h2 - Subtitle
* h3 - Level 3 title
* h4 - Level 4 title
* h5 - Level 5 title
* h6 - Level 6 title
* hr - Horizontal dividing line
* isindex - input prompt
* menu - menu list
* noframes - frames optional content, (for browsers that do not support frames, display this block content
* noscript -) optional script content (for browsers that do not support frames) Browsers that do not support script will display this content)
* ol - sorted form
* p - paragraph
* pre - formatted text
* table - table
* ul - unsorted list

Inline element
* a - Anchor point
* abbr - Abbreviation
* acronym - First word
* b - Bold (not recommended)
* bdo - bidi override
* big - big font
* br - line break
* cite - quotation
* code - computer code (required when citing source code)
* dfn - Define field
* em - Emphasis
* font - Font setting (not recommended)
* i - Italic
* img - Picture
* input - Input box
* kbd - Define keyboard text
* label - table label
* q - short quote
* s - underscore (not recommended)
* samp - define sample computer code
* select - project selection
* small - small font text
* span - commonly used inline container, defining text blocks
* strike - underline
* strong - bold emphasis
* sub - bottom Superscript
* sup - Superscript
* textarea - Multi-line text input box
* tt - Telex text
* u - Underline
* var - Define variable

Variable elements
Variable elements determine whether the element is a block element or an inline element according to the context.

* applet - java applet
* button - button
* del - delete text
* iframe - inline frame
* ins - inserted text
* map - picture Block (map)
* object - object object
* script - client script