LAST UPDATED: JUNE 28, 2021
CSS Inline-block
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 inline-block value
In the given example 1 the display: inline-block property is specified along with the height and width property to the <p> element. If we specify the height and 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.
<!DOCTYPE html>
<html>
<head>
<title>Inline Block</title>
<style>
p{
display: inline-block;
height: 120px;
width: 100px;
color: white;
background-color: black;
}
</style>
</head>
<body>
<p>Box 1</p>
<p>Box 2</p>
<p>Box 3</p>
</body>
</html>
Output:
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.
Conclusion
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.
