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.

Syntax

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

Example

.box 
{
    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>
<html>
    <head>
        <style>
            .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>
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 :

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

CSS BASICS & SELECTORS CSS SELECTOR ATTRIBUTE CSS STYLE FORMS COLORS & BACKGROUND CSS MARGIN & PADDING CSS WIDTH & HEIGHT CSS LINKS CSS BLOCKS

Related Searches to css Inline block