First of all you understand the difference between display( Inline,Block and Inline-block ) values
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.
Inline-block value can set left,right ,top,bottom margins and padding but not use line break .
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>
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>