Display property of css is of immense use as it gives us the power to change characteristics of some Tags of Html . for example:-
1) Display:inline
<p> is a block element that means if we use <p> tag and some value to it and then again write another <p> tag then new <p> will start from another line to better understand everything i have included a border on <p> tags
See this code i have included border for <p> tag in the style section
Output is :-
Clearly new paragraph is inserted in next line even though some extraspace was vacant in the first line , so Here display property of CSS comes into picture to provide us powers to change its characteristics see how ,
See in the style section i have include one new property display:inline
and the OUTPUT is:-
See both paragraphs are now in the same line
2) Display:Block
<span> tag occupies only that much space in the browser in which its content can totally fit in , see this code
for better understanding i have include border in the span
The output is :
See span is taking only that much space where its content completely fits in , this is evident form border one span tag finishes and immediately another span tag starts Unlike <p> tag which starts from next line , this shows that span tag is inline tag.
Now modifying its properties using Display property of css and setting display value as block
See i have added display as block inside style section and the output is
The content is now in the separate line
3). Display Inline-Block
The display inline-block is a CSS value that allows elements to behave as both inline and block elements at the same time. This means that an inline-block element will flow with the text content like an inline element, but can also have a width and height, and can be styled with margin and padding like a block element.
An inline-block element is similar to an inline element in that it does not start on a new line and will wrap to the next line if there is not enough space. However, it is also similar to a block element in that it can have a defined width and height, and can be centered or aligned like a block element.
Code Examples
Let's take a look at some examples to see how the display inline-block property works in practice.
Example 1: Basic Inline-Block Element
In this example, we have a div element with a class of "inline-block". We've set the width to 200 pixels and the height to 100 pixels, and added a background color and some padding. Because the display property is set to "inline-block", the element will flow with the text content like an inline element, but it will also have a defined width and height like a block element.
.inline-block {
display: inline-block;
width: 200px;
height: 100px;
background-color: blue;
padding: 10px;
}
<div class="inline-block">This is an inline-block element.</div>
<div class="inline-block">This is an inline-block element. </div>
The output is :-
The main difference between inline and inline-block is that we can set the height and width of elements as div in this case .
Example 2: Centering an Inline-Block Element
In this example, we've centered an inline-block element using the text-align property. Because the display property is set to "inline-block", we can center the element just like we would a block element.
.inline-block {
display: inline-block;
width: 200px;
height: 100px;
background-color: blue;
padding: 10px;
text-align: center;
}
<div class="inline-block">This is an inline-block element.</div>
<div class="inline-block">This is an inline-block element.</div>
The Output is :
it is clearly visible that text is starting from middle instead of starting point of box
Example 3: Vertical Alignment with Inline-Block Elements
One of the advantages of using inline-block elements is that they can be vertically aligned just like text content. In this example, we've aligned two inline-block elements vertically using the vertical-align property.
.inline-block {
display: inline-block;
width: 200px;
height: 100px;
background-color: blue;
padding: 10px;
vertical-align: middle;
}
<div class="inline-block">This is an inline-block element.</div>
<div class="inline-block">This is another inline-block element.</div>
The output is :
Conclusion
The display inline-block property is a useful CSS value that combines the best of both worlds when it comes to layout. It allows elements to flow with the text content like an inline element, while also having a defined width and height like a block element. Additionally, inline-block elements can be centered and vertically aligned just like block elements. By understanding how to use inline-block elements, you can create more complex and interesting layouts for your website.