CSS - Inline Block

 CSS Inline Block

Learn css - css tutorial - CSS Inline Block - css examples - css programs

Inline Block - Definition And Usage

  • In css inline-block can make a grid of boxes that fills the browser width and wraps nicely.
  • It has been possible for a long time using float, but nowadays with inline-block it's even easier.
  • Inline-block elements are like inline elements but they can have a width and height.
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.


    display: inline-block;
click below button to copy the code. By - css tutorial - team


    Display: inline-block
    width: 200px;
    height: 100px;
    margin: 1em;
click below button to copy the code. By - css tutorial - team

Sample Code :

 Tryit<!DOCTYPE html>
            .box {
            display: inline-block;
            width: 200px;
            height: 100px;
            border: 3px solid #0C7BC2;
        .after-box {
            border: 3px solid #0C7BC2;
           <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> 
click below button to copy the code. By - css tutorial - team

Code Explanation :

Code Explanation
  1. 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.
  2. 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.
  3. Height property allocates the height of the box. Here we have given 100 pixels.
  4. 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.
  5. 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 :

  1. 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.

This page provides a detailed information on best html and css editor , website css , css html editor , basic css code , learn css3 , css 2 , html and css codes , css for beginners , style css html , css template generator , online html and css editor , basic html css template , html and css tutorial for beginners , learn css online , css code generator , css3 design , css free , html with css , online html css editor , best way to learn css.

View More Quick Examples


Related Searches to css Inline block

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.