First, to understand what is block-level elements and row-level elements
Block-level elements
Will occupy a row of the page, after which several block elements are wrapped automatically, can be set width,height, the width is set to occupy a row, the same can also set the margin and padding properties.
PS: Common block-level elements: div,img,ul,form,p, etc.
Row-level elements
With other elements on the same line, height, row height, and the bottom margin is not changed, height is the content of text or the width of the picture, can not be changed.
Ps:em,strong,br,input, etc.
The difference between display:inline-block,block,inline elements
1. Display:block the element as a block-level element, allowing for better manipulation of the element's width and inner and outer margins, with each block-level element starting from the new line.
2, display:inline elements displayed as inline elements, height, row height and the bottom margin can not be changed, height is the content of text or the width of the picture, can not be changed. Multiple adjacent inline elements are lined up in the same row, knowing that the page line does not fit before the new line is changed.
3, Display:inline-block look Value name Inline-block is a mixed product, in fact, the element is displayed as a block element in the row, after setting the property, other inline block-level elements will be arranged on the same line. For example, we li element a inline-block, so that it has both block width height characteristics, and inline peer characteristics, in the same row have different height content elements, usually set the alignment such as vertical-align:top; to align the top of the element.
Cases:
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title>Display:inline-block</title> <styletype= "Text/css">Li{width:200px;text-align:Center;List-style:None;Display:Inline-block;Background-color:#eee; } </style></Head><Body> <ul> <Li><ahref="#">Inline-block</a></Li> <Li><ahref="#">Inline-block</a></Li> <Li><ahref="#">Inline-block</a></Li> <Li><ahref="#">Inline-block</a></Li> <Li><ahref="#">Inline-block</a></Li> </ul></Body></HTML>
Display:inline-block,block,inline Example
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css">#inline P{Display:inline;Background-color:Red;width:300px;/*This setting is useless*/ }#inline-block P{Display:Inline-block;Background-color:Red;width:100px;padding:10px; }#block P{Display:Block;Background-color:Red;width:100px;padding:20px; }Div{margin:20px;Background-color:#eee; } </style></Head><Body> <DivID= "inline">The display:inline is on the same line, and the width is equal to the width of the text content and the set width is useless<P>Content Content Content Contents</P> Content Content Contents content content</Div> <DivID= "Inline-block">Display:inline-block has the characteristics of both row-level elements and block-level elements, so on the same line, you can set the width height, margin,padding<P>Content Content Content Contents</P> Content Content Contents content content</Div> <DivID= "Block">Display:block block-level elements will be automatically replaced with new lines, occupy a row, you can set the width of the high, margin,padding<P>Content Content Content Contents</P> Content Content Contents content content</Div></Body></HTML>
It is important to note that:
The low version of IE browser (IE6 IE7) is not supported display:inline-block, so theoretically IE is not aware of other, but in the IE kernel there is a part called Haslayout, as long as the trigger it, This element can be set to a high width so that the row-level elements have the appearance of the Display:inline-block attribute.
The difference and usage of display:inline-block,block,inline
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
