display:Inline vs display:block

Normally HTML elements are rendered as box elements according to HTML specification. But the element could be shown in different manner. If not specified all the HTML elements inherit the default display property according to their behaviors. These default and basic properties are:-
1.inline
2.block
3.none

display:none, property implies that element and its children elements will not be rendered at all and would not be displayed on the page.

But rest of the elements are either inline or block ,so we will learn about the difference between inline vs block

A block element-
– Uses full width of available space
– starts always in next line
– margin and width defined on these elements will be reflected on page

Common Block elements :-

<h1> to <h6> , <p>,<div>, <table>,<form>,<pre>,<block>,<blockquote>

An inline element

– do not break the flow, it starts in the continuity of the existing element
– does not use complete space
– the margin and padding would be reflected only in horizontal direction not in vertical direction

Common inline elements :-

<ul>,<li>,<a>,<span>,<strong>,<em>

Example for (display:block) elements :-

<style>
div{
border:2px soild #000;
background-color:#ccc;
}
</style>
<div id="div1">
This div is using complete space.

</div>

<div  id="div2">
div2 is using complete space  and starts in second line after first div

</div>

Example for (display:block) elements:-

<p>The span element won't start in next line<em>inline span element</em></p>

The span element won’t start in next line inline span element

Common Problems related to this section:-
1. Why image (img) element is not taking margin-top or bottom..