CSS Inline-Block: Creating Responsive Layouts
CSS display: inline-block
is a value for the display
property that allows an element to be displayed as an inline-level block container.
This means that the element is treated as an inline element but can also have a width, height, padding, and margin applied to it just like a block-level element.
As an example:
Editor
Loading...
In this example:
- We have a container with a fixed
width
of400
pixels and a solid black border. - The
text-align
property is set tocenter
to center the inline-block elements inside the container. - Inside the container, we have three
div
elements with the classbox
. - Each box has a fixed
width
andheight
, a margin of 10 pixels, and a pink background color. - The
display
property is set toinline-block
, which allows the boxes to be displayed inline but also have awidth
andheight
applied to them. - Because the boxes are displayed inline, they are arranged horizontally within the container. Because they are also block-level containers, their
width
andheight
properties are applied, and they are separated by the margin.
The differences between display: inline
, display: inline-block
, and display: block
:
Editor
Loading...
In this example:
- We have three different containers, each containing three elements with a different display value.
The first container:
- Contains three elements with
display: inline
. - These elements flow
inline
with each other, and theirwidth
is determined by their content. - The
margin-right
property creates some space between the elements.
The second container:
- Contains three elements with
display: inline-block
. - These elements flow
inline
with each other, but they also have a fixedwidth
andheight
, as well aspadding
and aborder
. - The
margin-right
property creates some space between the elements.
The third container:
- Contains three elements with
display: block
. - These elements are
block-level
elements, which means they take up the fullwidth
of their container and start on a new line. - The
margin-bottom
property creates some space between the elements.