CSS and Inline-Block

css CSS and Inline-Block Display Inline Bock

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 Inline Bock Chapter Next »