CSS Display : Inline-Block
A block element occupies the maximum available width of its parent element. It starts with a new line and, in contrast to inline elements, it does not restrict the type of elements it may contain.
Example -
Hello world!
This is an example!
|
Output -
In the above example the div element is block-level by default, and as shown above, the two block elements are vertically stacked and, unlike the inline elements, the flow of the text breaks.
Whereas -
The inline-block value gives us the best of both worlds -
it blends the element in with the flow of the text while allowing us to use padding, margin, height and similar properties which have no visible effect on inline elements.
Elements with this display value act as if they were regular text and as a result are affected by rules controlling the flow of text such as text-align.
By default they are also shrunk to the smallest size possible to accommodate their content.
Syntax -
Now we will see example -
Example - We will see unordered list -
- First Element
- Second Element
- Third Element
|
Output-
