CSS display: inline-block effect

 The effect of CSS display:inline-block can make many blocks automatically float and arrange horizontally, and there is no need to set additional clear and the following elements will not float to cover the block. This is a bit abstract, in traditional design When DIV blocks are arranged horizontally, web designers usually use the float attribute of CSS to make each DIV block have a floating effect, so that many blocks can be arranged horizontally, but it is easy to cause other than these blocks Blocks also float up, so the web designer will add the clear attribute at the end of the block group to clear the floating effect. The effect of display:inline-block is that we don’t need to set the clear attribute additionally . The block will not be covered. CSS display: inline-block syntax

display:inline-block;

The usage is the same as the general display attribute value, inline-block is only one of the parameters of the display attribute .

CSS display: inline-block practical example 1. First use traditional design methods

<style type="text/css">
<!--
#TestDIV1{
    float:left;
    width:200px;
    height:50px;
    border:2px #ccc solid;
    margin-right:10px;
    margin-bottom:10px;
}
# TestDIV2 {
    clear:left;
    width:100%;
    height:10px;
    border:2px orange solid;
}
-->
</style>
<div id="TestDIV1"></div>
<div id="TestDIV1">< /div>
<div id="TestDIV1"></div>
<div id="TestDIV2"></div>

Example result

Example 1 is the traditional block floating setting method, which simply uses the float attribute, and the clear attribute must be added to the orange TestDIV2 block, otherwise the orange TestDIV2 block will be pressed to the three gray boxes above the TestDIV1 block , And then let's see how to use display:inline-block to create the same effect.

CSS display:inline-block practical example 2

<style type="text/css">
<!--
#TestDIV3{
    display:inline-block;
    width:200px;
    height:50px;
    border:2px #ccc solid;
    margin-right:10px;
    margin-bottom:10px;
}
#TestDIV2 {
    width:100%;
    height:10px;
    border:2px orange solid;
}
-->
</style>
<div id="TestDIV3"></div>
<div id="TestDIV3"></div >
<div id="TestDIV3"></div>
<div id="TestDIV2"></div>

Example result

 

The gray box TestDIV3 block in Example 2 uses the effect of "display:inline-block;". At this time, our orange TestDIV2 block does not need to use the clear attribute to create the same effect as Example 1. This is "Display:inline-block;" features.

The effect of CSS display:inline-block is similar to that of display:inline, but display:inline-block can set the width and height of elements, which is more powerful.