What are the differences between inline elements and block-level elements in html?

This time I will bring you the what are the differences between html's inline elements and block-level elements, what are the precautions when using html's inline elements and block-level elements, The following is a practical case, let’s take a look.

html tags are divided into two types, inline elements and block-level elements. First, let’s understand the concepts of inline elements and block-level elements:

Block-level Element: Generally a container for other elements, it can accommodate inline elements and other block-level elements. Block-level elements exclude other elements located on the same line as them. The width (width) and height (height) attributes can be set. Block-level elements in normal flow Will be placed vertically. Common block elements are "div"

Inline elements (inline elements): Inline elements can only accommodate text or other inline elements. They are descendants of block-level elements, which allow other inline elements to be located with them. On the same line, the height (height) and width (width) cannot be set. A common inline element is "a".

According to the concept of block-level elements, we can understand that block-level elements have line breaks before and after them, which is equivalent to adding a
tag before and after the element. We can think of block-level elements as a block or a rectangle, so block-level elements can set the height and width attributes

Example:
css file:

#div1{  
 width:200px;  
 height:200px;  
 background:#666  
 }  
div2{  
 width:200px;  
 height:200px;  
 background:#F00  
 }

html file:

<div id="div1">  
     div1  
块级元素排斥其他元素与其位于同一行  
</div>  
  <div id="div2">  
     div2  
块级元素排斥其他元素与其位于同一行  
</div>

Two div elements are not located on the same line

According to the concept of inline elements, we can understand that there are no line breaks before and after inline elements. We can think of an inline element as a line, so it cannot set the height and width attributes.

Block element tag

address - address
blockquote - block quote
center - center alignment
dir - directory list
div - commonly used Block level is easy and 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 heading
h4 - Level 4 heading
h5 - Level 5 heading
h6 - Level 6 heading
hr - Horizontal dividing line
isindex - input prompt
menu - Menu list
noframes - frames optional content, (display this block content for browsers that do not support frames
noscript - optional script content (display this content for browsers that do not support script)
ol - sorting form
p - Paragraph
pre - Formatted text
table - Table
ul - Unsorted list

Inline element

a - Anchor Dot
abbr - abbreviation
acronym - first character
b - bold (not recommended)
bdo - bidi override
big - big font
br - line break
cite - Quote
code - Computer code (required when citing source code)
dfn - Define fields
em - Emphasis
font - Font setting (not recommended)
i - Italics
img - image
input - input box
kbd - define keyboard text
label - table label
q - short quote
s - underscore
samp - define sample computer code
select - Item selection
small - Small font text
span - Commonly used inline container to define blocks within text
strike - Underline
strong - Bold emphasis
sub - Subscript
sup - Superscript
textarea - Multi-line text input box
tt - Define typewriter text
var - Define variables

I believe I have read these You have mastered the method in the case. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use the base tag

How to use js to get the local system time in html

How to hide other attributes in a tag and only display pictures

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