Say Inline-block (within the line block element), first of all, his other 2 brothers
Display:inline; Inline elements, in simple terms, are displayed on the same line. He has no height, and setting width and height for inline elements is ineffective.
Display:block; A block-level element, which simply means that there is a newline and will be changed to the second line. You can also set the width height.
Inline-block detailed
The elements of the Inline-block have both a block element that can be set to a wide-height feature, and an inline element that does not wrap by default. Of course not only these features, such as the inline-block element can also be set vertical-align (because this vertical alignment property is only valid for elements that have the inline-block set) property.
In HTML, line breaks, spaces, tabs, and so on are merged into white space, the font size is not 0, the space character naturally occupies a certain width, using Inline-block will create the gap between the elements. (This sentence will be explained in the following example)
Or indefinitely, take a look at the example, and make sure you understand.
Detailed application
Before I knew about inline-block , my navigation bar had been using float float to achieve horizontal alignment, but the float would have side effects and needed to clear the float and become more troublesome. The use of Inline-block will be very convenient.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style>Div{width:100%;background:Yellow;Height:100px;text-align:Center;Line-height:100px; }a{Color:#fff;text-decoration:None;Display:Inline-block;width:100px;Height:30px;Line-height:30px;background:Red; } </style></Head><Body> <Div> <ahref="">I'm A1.</a> <ahref="">I'm A2.</a> <ahref="">I'm A3.</a> <ahref="">I'm A4.</a> </Div></Body></HTML>
Effect
It is found that there is a gap between each A, the gap is because the block-level elements will be wrapped, there will be a line break. Line breaks, spaces, tabs, and so on in HTML are merged into white space. So the line break will occupy the width, creating a gap
How to cancel the gap produced by Inline-block
I think there are 2 ways
First Kind
margin with negative values is not the same for each browser, in order to fit perfectly
| Browser | Margin value (left and right) |
| Firefox | Margin:-4px |
| Chrome | margin:-3px |
| Ie | margin:-2px |
The second Kind
Set word-spacing negative values in the parent element 's CSS
| Browser | Word-spacing |
| Firefox | margin:-8px |
| Chrome | Margin:-6px |
| Ie | Margin:-4px |
Effect
Compatibility
Unfortunately, browsers below IE7 do not support Inline-block, but are not completely unsupported
Ways to resolve IE6, IE7 compatibility:
1, first set the Inline-block trigger block element, with the layout characteristics, and then set Display:inline to make the block elements render inline elements, the layout of the characteristics will not disappear.
2, directly set Display:inline, using Zoom:1 trigger layout.
All browsers are compatible with the following methods:
Display:inline-block;
*display:inline;
*zoom:1;
Compatibility resolution reference from Charling:inline-block compatibility issues
Inline-block (Intra-line block element) and its application
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
