Conversion between block and inline Elements

During page layout, HTML tags are divided into two types: block elements and inline elements (the tag Div and P we usually use are block elements, and the link tag a is an inline element ). They are two very important concepts. When talking about concepts, Let's first look at the definitions of block elements and inline elements. You should pay attention to the differences between them.

 

Block Elements
Generally, it is a container of other elements, which can accommodate inline elements and other block elements. Block elements exclude other elements from the same row, and the width (width) height takes effect. Common block elements are Div and P.

Inline Element
An inline element can only contain text or other inline elements. It allows other inline elements to be in the same row, but the width (width) height does not work. The common inline element is "".

Set display: Block in CSS to convert inline to block, and the height and width will take effect.

Setting display: inline will convert the block into inline.

Set display: None. Nothing is displayed.

Let's test the following:

Example:

<! Doctype HTML> 
The above code converts the <span> (Inline) element into a block. The effect is as follows:
 
650) This. width = 650; "style =" width: 744px; Height: pixel PX; "Title =" Export jpg" src = "http://s3.51cto.com/wyfs02/M02/49/F9/wKioL1Qgxm6wPiF6AADtfakVu_Y818.jpg" width = "902" Height = "258" alt = "wkiol1qgxm6wpif6aadtfakvu_y818.jpg"/>
<! Doctype HTML> 
The above code converts the <div> (Inline) element into a block. The effect is as follows:
 
650) This. width = 650; "style =" width: 713px; Height: 328px; "Title =" 21.jpg" src = "http://s3.51cto.com/wyfs02/M00/49/FA/wKioL1Qgx63QR_vbAAFl1xCYw84876.jpg" width = "937" Height = "241" alt = "wkiol1qgx63qr_vbaafl1xcyw83686.jpg"/>
 
Let's try again the effect of using display: None:
<! Doctype HTML> 
The following figure shows the effect:
 
650) This. width = 650; "style =" width: 696px; Height: pixel PX; "Title =" 22.jpg" src = "http://s3.51cto.com/wyfs02/M02/49/FA/wKioL1QgyE3TI_zuAAD42kXCgM0301.jpg" width = "851" Height = "420" alt = "wkiol1qgye3ti_zuaad42kxcgm0301.jpg"/>
 
Does the result make people feel that <div> has been deleted? Actually not. Check the code !!
This article is from the "don't bother" blog. For more information, please contact the author!
Conversion between block and inline Elements