Block difference (block element) and inline (inline element)

(2009-01-05 10:32:07)

label:

Zatan

Such div block elements, it will automatically occupy a rectangular space, by setting the height, width, and other properties of the inner and outer margins, to adjust the way of this rectangle;

contrast,

inline elements like "span", then not have their own independent space, which is dependent on the presence of other elements of the block level, thus setting the height, width, and other attributes of the inner and outer margins inline elements, are invalid.

In fact, you need to know is that inline elements span and a, other inline elements, such as strong, b, font before these are used to set the text style tag in HTML, and later use CSS, these tags should not have the so they do not know what's the use, calling instead for beginners confused concepts.

block manifested features are wrapped in.
inline show it is not a new line.

But if to an element added to the float (float), then they will be ranked in a row, according to the natural order. either block or inline defined floating Thereafter, you can define the height, width

under the presence of inline alone is not .block can define the width height.

For example:

Under normal circumstances is not a defined height. The width of the touches can be defined, but the reaction only the text portion of the mouse

if coupled display: block, then its height, but not in a row, the entire reactor block has a mouse

if coupled with float: left, then, can be defined high wide, with a reaction piece on the mouse menu but it is a lateral,

    All BODY element is allowed to be contained in the element, or block level; either inline; may be counted as either block level, it may be counted as inline. However, there is absolutely no one can contain the BODY, but that is a non-block level, and a non-inline element.

    Common block elements have DIV, FORM, TABLE, P, PRE, H1 ~ H6, DL, OL, UL and the like.
    Common inline elements have SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR , and so on.
    Further, SCRIPT, OBJECT, MAP, BUTTON , DEL, INS these elements, either as a block-level element, can be used as inline element.

    In general block element may comprise a block-level elements and inline elements;
    but inline elements can contain inline elements.
    It should be noted that each specific element can contain elements is specific, so specific to the individual elements, this rule is not applicable.
    Elements such as P, can contain inline elements, but can not contain block-level elements.

Block elements (block element)

     Generally is a container element other elements, the block elements generally starts a new row, it can accommodate inline elements and other block elements, the block elements are common paragraph tag 'P. "Form" the special block element, it can only be used to accommodate other block elements.

Inline elements (inline element)

    It is generally based on a semantic level (Semantic) basic elements. Inline elements can only contain text or other inline elements, common inline elements "a".

    ps: About inline element of the Chinese term for a variety of inline elements, inline elements, inline elements, inline elements.

    Also mentioned inline elements, we think there is a display of attributes are display: inline; this property can repair IE famous double floating border issues.

The variable element

The context is determined that the element is a block element or inline elements. The variable element or elements belonging to the two categories, once determined context his categories, he will follow the rules limit block elements or inline elements.

Block elements (Block Element)
* address - Address
* blockquote - block reference
* center - held in alignment block
* dir - directory list
* div - Common block level easily, the main label is css layout of
* dl - definition list
* fieldset - form control group
* form - interactive form
* h1 - title
* h2 - subtitled
* h3 - title level 3
* h4 - 4 level title
* h5 - 5 level heading
* h6 - 6 level heading
* hr - horizontal rule
* isindex - input prompt
* the mENU - menu list
* noframes - frames optional content (that do not support frame of the browser to display the contents of this block
* noscript -) optional script content (does not support script browsers display this content)
* OL - sort the forms by
* p - paragraph
* pre - formatted text
* table - table
* ul - ordered list of non-

inline element (element inline)
* A - anchor
* Abbr - Abbreviations
* acronym - the first word
* b - bold (not recommended)
* BDO - BIDI the override
* Big - large fonts
* br - newline
* cite - references
* code - computer code (required when referring source)
* dfn - defined fields
* em - stressed
* font - font set (not recommended)
* i - italic
* img - pictures
* input - input box
* kbd - defined keyboard text
* label - table tags
* q - short quote
* s - underlined (not recommended)
* SAMP - defined examples of computer code
* select - project selection
* small - small font text
* span - common inline container, within the definition of text blocks
* strike - underlined
* strong - highlighted in bold
* sub - subscript
* sup - superscript
* textarea - multi-line text entry box
* tt - teletext
* u - underlined
* var - definition of variables

The variable elements
of the variable element is determined that the element is a block element or elements based inline Context.
Applet * - the Java applet
* the Button - Button
* del - delete text
* iframes. - inline Frame
* INS - insert text
* map - picture block (the Map)
* Object - Object Object
* script - Client Script

Reprinted: http: //blog.sina.com.cn/s/blog_5b4b7ab10100bpo6.html