In CSS the display property is one of the most used property. It basically controls the display behavior of any element within a block. The display property has many values and inline-block is one of them.
inline-block value in CSS
This value comes with the characteristics of both the values inline and block. This property is used for providing the proper alignment to the layouts that are previously aligned by using the floats.
As compared to the
display: inline; property with the
display: inline-block, the difference is that the
inline-block value allows the user to set the height and width of the element. This value also prevents the line break, which means one element can be placed next to the other elements within a block.
Example: Specifying the
In the given example 1 the
display: inline-block property is specified along with the
width property to the <p> element. If we specify the
width property along with the
display: inline; then the given height and width are not applicable to the element. It will take the default height and width only which is implemented in next live example.
As we can see in the output image that the boxes are placed side by side even when the <p> is a block-level element. This is because we have specified the CSS property
display to with the value of inline.
Live Example: Specifying
display values in CSS
In this example, we have specified the
display: inline property instead of the
display: inline-block then the blocks that we have created by using the <p> element will not take the given height and width. It will take only the default height and width.
In this lesson, we have learned how the inline-block value of display property works and how it is different from the inline value of display property.