How inline elements and block-level elements convert to each other:
Inline elements and block-level elements can be converted to each other, and the conversion method is briefly described below.
I. Inline elements are converted to block-level elements:
Make the inline element float or set its display property value to block. For example:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.51texiao.cn/" /><title>Ant Tribe</title> <styletype= "Text/css">. Myfloat{width:200px;Height:200px;Border:1px solid Red;float: Right; }. Mydisplay{width:200px;Height:200px;Border:1px solid Green;Display:Block; } </style> </Head> <Body> <spanclass= "Myfloat">I'm going to float</span> <spanclass= "Mydisplay">I'm going to add the display property</span> </Body> </HTML>
You can see that span has been converted to block-level elements because block-level elements can be set to width and height.
Block-level elements are converted to inline elements:
Set the Display property value of the block-level element to inline.
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.51texiao.cn/" /><title>Ant Tribe</title> <styletype= "Text/css">. MyTest{width:200px;Height:200px;Border:1px solid Red;Display:inline; } </style> </Head> <Body> <Divclass= "MyTest">I'm going to float</Div> </Body> </HTML>
The width and height set in the above code have been invalidated, indicating that the object has been converted to an inline element.
The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0519/1897.html
The most original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=4705
How inline elements and block-level elements convert to each other
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
