What is the difference between blocks (block elements), inline (inline elements)?

The first thing we need to know is that all HTML elements are either blocks (block elements) or inline (inline elements). Here is a look at the characteristics of block and inline:

Features of the block element:

Always start on a new line;
Height, row height and top and bottom margins are controllable;
The width defaults to 100% of its container, unless a width is set.

Characteristics of inline elements:

and other elements are on one line;
High, the row height and the top and the bottom distance cannot be changed;
The width is the width of its text or picture, and cannot be changed.

Let's take a look at their situation in detail.

Block elements are generally container elements of other elements, and block elements are generally started from new rows, which can hold inline and other block elements, and common block elements are paragraph label ' 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".

Need to explain: inline element in Chinese name, 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.

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 underlying concept of a mutable element, which varies with the environment, 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.

Block and inline classification details for HTML tags:

　　Chunk elements (block Element)

Address-Addresses
BLOCKQUOTE-Block Reference
Center-align block in lift
Dir-Directory Listing
Div-common block level easy, is also the main label CSS layout
DL-Definition List
Fieldset-form control Group
Form-Interactive Form
H1-Big title
H2-Subtitle
H3-3 level headings
H4-4 level headings
H5-5 level headings
H6-6 level headings
HR-Horizontal Divider Line
Isindex-input prompt
menu-List of menus
Noframes-frames Optional, (display this chunk for browsers that do not support frame)
NoScript-Optional script content (shown for browsers that do not support script)
OL-Sort the form
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 referencing the source)
DFN-Defining fields
EM-Emphasis
font-fonts settings (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, defining block within text
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 objects
Script-Client scripting