CSS and Inline-Block


css CSS and Inline-Block Display Block Value

CSS Inline-Block

First of all you understand the difference between display( Inline,Block and Inline-block ) values

Display Inline value:

Care about left & right margins and padding, but not respect top & bottom margins. Inline value cannot set width and height. Permition other elements to sit their left and right side.

Display Inline-block value:

Inline-block value can set left,right ,top,bottom margins and padding but not use line break .

Display Block value:

Respect all of parameters but main difference is that it can add a line break after every block element.

<style> #c { display: inline; border: 1px solid black; padding: 4px; width: 70px; height: 70px; background-color: powderblue; } #d { display: inline-block; border: 1px solid black; padding: 4px; width: 70px; height: 70px; background-color: powderblue; } #e { display: block; border: 1px solid black; padding: 4px; width: 70px; height: 70px; background-color: powderblue; } </style> <div >This rectangular box is represent as inline <span id="c">inline</span> <span id="c">inline </span> This rectangular box is represent as inline </div> <div> This rectangular box is represent as inline-block <span id="d"> inline block</span> <span id="d">inline block</span> This rectangular box is represent as inline block. </div> <div> This rectangular box is represent as block. <span id="e"> block</span> <span id="e"> block</span> This rectangular box is represent as block </div>

Navigation links

You can create horizontal navigation links

<style> #nav { background-color: #FF00FF; text-align: left; } #nav li { display: inline-block; padding: 10px; font-size: 18px; } </style> <h1>Navigation Links</h1> <ul id="nav"> <li><a href="#News">News</a></li> <li><a href="#about">About Us</a></li> <li><a href="#Contact">Contact Us</a></li> <li><a href="#jobs">jobs</a></li> </ul>
css Display Block Value Chapter Next »