CSS - Inline Block


   CSS - Inline Block

  • The inline-block value of the display property is used to display the block of contents that fills the browser width horizontally and wraps around them easily.

Syntax :

Element
{
    display: inline-block;
}

Example :

.box 
{
    Display: inline-block
    width: 200px;
    height: 100px;
    margin: 1em;
}

Sample Code :

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        .box {
            display: inline-block;
            width: 200px;
            height: 100px;
            border: 3px solid #0C7BC2;
        }
        .after-box {
            border: 3px solid #0C7BC2;
        }
        </style>
    </head>
        <body>
            <div class="box">Wikitechy</div>
            <div class="box">Wikitechy</div>
            <div class="after-box">If we are using float property we have to assign clear attribute</div> 
        </body>
</html>

Code Explanation :


    Creating a class to apply styles for group of elements. .(dot) Class name syntax is used to create a class in CSS. Here, we have created a class for box.

    In CSS, display: inline-block is used to achieve the same effect of float. The display attribute with inline block value display the grid boxes horizontally.

    Width property allocates the width size for the box. Here we have given 200 pixels.

    Height property allocates the height of the box. Here we have given 100 pixels.

    Border property generates border around the box. Here, we have created a border for the box which is 3 pixels width, solid type style and red color.

    For the better understanding we created a class after-box and assigned a border size and color for it using border property. 

Note : If we are using float property here, we have to separate the two classes using clear property.

Output :


    The boxes will appear wrap around the window browser horizontally. The after-box will not float next to the boxes and stand unique because of inline-block value.