Home > Article > Web Front-end > 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)
What are the row elements and block elements:Block element (block element)
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
Inline element (inline element)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]
HTML5 What is it, and what are the features, advantages and disadvantages of HTML5?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!