What are the inline elements and inline elements of html? Introduction to the characteristics of html inline elements and inline elements

htmlWhat are the inline elements? What are the elements within an html block? This article introduces which are inline elements and which are block-level elements, their characteristics and differences.

Characteristics of HTML inline elements:

Inline elements are also called inline elements or embedded elements. Inline elements and other elements are all on the same line, and the height, line height, padding, and margins cannot be changed. The width is the width of its text or image, and it cannot be changed. Inline elements can only hold text or other inline elements.

The a, img, and br mentioned in the previous article are inline elements.

Characteristics of block-level elements:

①Always start on a new line;

②Height, line height and margins and padding can be controlled;

③The width defaults to 100% of its container, unless a width is set;

④It can accommodate inline elements and other block elements.

Characteristics of inline elements:

① and other elements are on the same line;

②Height, line height and outer and inner margins The spacing cannot be changed;

③The width is the width of its text or picture and cannot be changed;

④Inline elements can only accommodate text or other inline elements.

Explanation on inline elements and block elements:

According to the CSS specification, every web page element has a The display attribute 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; and The default display attribute value of the span element is "inline", which is called an "inline" element. Block-level elements such as div will automatically occupy a certain rectangular space. The appearance of this rectangle can be adjusted by setting attributes such as height, width, inner and outer margins; on the contrary, in-line elements such as "span" and "a" Elements 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

Internal elements will not be monopolized, and adjacent line elements will be arranged in the same row. It is known that the line cannot be changed before it will be changed. The width will change with the content of the element. , block-level elements can set the width and height attributes, and inline elements set width and height are invalid

(Note: Even if the width of a block-level element is set, it still occupies an exclusive line)

(3) .Block-level elements can set margin and padding. The horizontal padding-left, padding-right, margin-left, and margin-right of inline elements all produce margin effects, but the vertical padding-top and padding-bottom, Neither margin-top nor margin-bottom will produce margin effects. (The horizontal direction is valid, the vertical direction is invalid)

address - address

blockquote - block quote

center - alignment block

dir - directory list

div - common block Level is easy, and it is also the main tag of css layout

dl - definition list

fieldset - form control group

form - interactive form

h1 - title

h2 - Subtitle

h3 - Level 3 title

h4 - Level 4 title

h5 - Level 5 title

h6 - Level 6 title

hr - horizontal separator line

menu - menu list

noframes - frames optional content, (this block content is displayed for browsers that do not support frames

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

ol - sort form

p - paragraph

pre - Formatted text

able - Table

ul - Unsorted list

a - Anchor

abbr - Abbreviation

acronym - First word

b - Bold (not recommended)

big - Big font

br - line break

cite - quote

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, define 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

[Related recommendations]

Basic elements of html, allowing you to learn HTML from scratch

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