What are html inline elements and block elements?

htmlInline elements include: a (anchor element), b (bold), br (line break), code, em (emphasis), font (font setting), i (italic), img (picture ), input (input box), span, strong (bold emphasis), textarea, u, etc.; block elements include: address (address), blockquote (block quote), center (center-aligned block), div, h1~h6 (title), hr (horizontal dividing line), p, ul, ol, etc.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

Explanation on inline elements and block elements

According to the CSS specification, each web page element has a display attribute, which is used to determine the type of the element. , each element has a default display attribute value. For example, a div element has a default display attribute value of "block" and becomes a "block-level" element; while a span element has a default display attribute value of "inline". ”, called an “inline” element.

Block-level elements such as div will automatically occupy a certain rectangular space. You can adjust the appearance of this rectangle by setting attributes such as height, width, inner and outer margins; on the contrary, like "span" Inline elements like "a" do not have their own independent space. They exist attached to other block-level elements. Therefore, setting attributes such as height, width, and inner and outer margins on inline elements is invalid.

The difference between inline and block elements:

(1). Block-level elements will occupy an exclusive line, and their width will automatically fill the width of their parent element
Inline elements It will not occupy an exclusive line. Adjacent in-line elements will be arranged in the same line. They will not break until they cannot fit in one line. Their width changes with the content of the element
(2). In general, block-level elements can be set width, height attributes, inline elements set width, height invalid
(Note: even if the width of block-level elements is set, it still occupies an exclusive line)
(3). Block-level elements can set margin and padding. Inline elements The horizontal padding-left, padding-right, margin-left, and margin-right all produce margin effects, but the vertical padding-top, padding-bottom, margin-top, and margin-bottom do not produce edges. distance effect. (Valid in the horizontal direction, invalid in the vertical direction)

Block element (block element)

　* address - address

　* blockquote - block quote

* center - center-aligned block

* dir - directory list

* div - commonly used block level, also the main tag of css layout

* dl - Definition list

* fieldset - form control group

* form - interactive form

* h1 - title

* h2 - subtitle

　* h3 - Level 3 heading

* h4 - Level 4 heading

* h5 - Level 5 heading

* h6 - Level 6 heading

* hr - horizontal separator line

* isindex - input prompt

* menu - menu list

* noframes - frames optional content, (for browsing that does not support frames The browser displays the content of this block

　* noscript - optional script content (this content is displayed for browsers that do not support script)

　* ol - sorting form

　* p - paragraph

* pre - formatted text

* table - table

* ul - non-sorted list

Inline element (inline element)

* a - anchor point

* abbr - abbreviation

* acronym - first word

* b - bold (not Recommended)

* bdo - bidi override

* big - large font

* br - line break

* cite - quote

* code - computer code (required when citing source code) * dfn - definition 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 - item selection

* small - small font text

* span - commonly used inline container, defining blocks within text

* strike - underline

* strong - bold emphasis

* sub - subscript

* sup - superscript

* textarea - multi-line text input box

　* tt - telex text

　* u - Underline 　　

　* var - Define variables 　　

Variable elements 　　

　 Variable elements are determined based on the context. Be a block element or an inline element.

* applet - java applet

* button - button

* del - delete text

* iframe - inline frame

* ins - inserted text

* map - image block (map)

* object - object object

* script - client script

related Recommended: "html video tutorial"

The above is the detailed content of What are html inline elements and block elements?. For more information, please follow other related articles on the PHP Chinese website!