1, Display:inline-block
Allows an element to have properties of block elements (you can set width and height), and an inline element property (no line wrapping is generated).
2, ie in the Inline-block
IE6 does not support this property, but IE8 is starting to support this property.
Let the IE6 inline elements have inline-block characteristics
Because Inline-block triggers the layout of IE, the IE6 only sets {Display:inline-block;} Can.
There are two ways to have IE6 block elements with Inline-block properties
A, you can first trigger the layout, and then set to inline, you need to note that these two display must be in two CSS declarations to be valid, the code is as follows:
div {width:400px; height:200px; display:inline-block;} div {display:inline;} B, directly set to inline, and then use Zoom to trigger the layout to achieve similar effects:
div {width:400px; height:200px; *display:inline; *zoom:1;} 3, other browsers
This property is supported by other browsers, but Firefox does not support this property since 3.0, and the previous version can use its private property {Display:-moz-inline-box} to achieve a similar effect. But you can also ignore versions prior to 3.0 (these versions of browsers are rarely used).
Example
For Display:inline-block There are many convenient, can be horizontal vertical center, but also can be set high width, but there is a problem, when the use of inline-block found when the corresponding percentage of each element, their sum is greater than 100%, resulting in a line-wrapping situation, At first not how to care about this problem, today did a study, only to find that the original display:inline-block to the middle of the element will have a blank gap, as shown:
The corresponding code is:
<style type= "Text/css" >
*{margin:0;padding:0;}
. Di{display:inline-block;width:200px;height:100px;background: #f00;}
</style>
<body>
<div class= "Di" > This is the first div</div>
<div class= "Di" > This is the second div</div>
</body>
In fact, this gap is not reflected in the code, but it is actually we ignore the space, because when we set the element Inline-block, it already has the nature of the line, that is, elements and elements can be entered between the space, and because of our habit of writing code, The above two elements we define are usually wrapped between lines, and no matter how many spaces will become a space, there is a gap phenomenon.
When we change the code as follows:
<style type= "Text/css" >
*{margin:0;padding:0;}
. Di{display:inline-block;width:200px;height:100px;background: #f00;}
</style>
<body>
<div class= "Di" > This is the first div</div><div class= "Di" > This is the second div</div>
</body>
There is no space:
The root cause of this problem is here, then how to solve it, the implementation of the elements of the default spacing is because there is font-size this attribute, we set the font-size to 0 can solve this problem.
<style type= "Text/css"
*{margin:0;padding:0;}
body{font-size:0}
.di{display:inline-block;width:200px; Height:100px;background: #f00 font-size:14px}
</style>
<body>
<div class= "Di" > This is the first div</div>
<div class= "Di" > This is the second div</div>
</body>
Need to add font-size:0 to the corresponding parent element, attention is to be in the child element and then reset font-size, otherwise will not see the text inside.
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
