Inline vs Block elements in CSS

Most of the HTML elements have default value for display property in CSS as block or inline. 

The elements with default value of display property as block include <div>, <p>, <h1> to <h6>, <form> etc. The elements with this display type have the following characteristics:

• Height, line-height, and top and bottom margins can be changed.
• Always begin on a new line.
• Width is 100% unless a width is specified.

The elements with default value of display property as inline include <span>, <a>, <img>, <input> etc. The elements with this display type have the following characteristics:

• Height, line-height and top and bottom margins cannot be changed. 
• Begin on the same line 
• Width is based on the text/image and it cannot be changed.

The characteristics mentioned above of an element can be  changed by setting the CSS property of the element as display: inline or display: block. By changing this property value we can do achieve many options like:

• Have a block element start on the same line 
• Have an inline element start on a new line 
• Change the width and height of an inline element. 

The following is the sample CSS code to make a link look like a button with 100px width:

 

a{

color:white;

text-decoration:none;

background:#00f;

padding:10px;

width:100px;

margin:10px;

text-align:center;

display:block;

}

If we remove the display:block property from the above code, the width and margin of the link cannot be modified.