<div class="block1">I am Display Inline</div>
<div class="block1">I am Display Inline</div>
<br />
Note:- In display inline css , tag is occupy its nessaccary width according to its inner content. But height is not effected. it removes the default outer space from tag.
<hr />
<div class="block2">I am Display Block</div>
<div class="block2">I am Display Block</div>
<br />
Note:- In display inline-block css , tag will occupy its nessaccary width according to its inner content. But height is effected. And display inline-block does not remove the default outer space from tag
<hr />
<div class="block3">I am Display None</div>
<br />
Here is div which is dispaly none
<div class="block3">I am Display None</div>
<br />
Note:- This css property keep the tag in display none .
<hr />
<br/>
<div class="block4">I am Float</div>
<div class="block4">I am Float</div>
<br />
Note:- In float css , tag will occupy its nessaccary width according to its inner content. But height is effected. And float property remove the default outer space from tag.
<hr />
<br/>
<div class="block5">I am Display Block</div>
<div class="block5">I am Display Block</div>
<br />
Note:- In Display Block css , tag will occupy width as much as possible, means it takes full width space. But height is effected.
.block1 { height:50px; background-color:#996600; padding:5px; margin:5px; display:inline}
.block2 { height:50px; background-color:green; padding:5px; margin:5px; display:inline-block}
.block3 { height:50px; background-color:grey; padding:5px; margin:5px; display:none}
.block4 { height:50px; background-color:purple; color:#fff; padding:5px; margin:5px; float:left;}
.block5 { height:50px; background-color:pink; padding:5px; margin:5px display:block; margin:5px;}