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.
- 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.
Sample Code :
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.
- 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.
- 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.