Block and Inline Elements in HTML – HTML,CSS tutorial

It is very much important for a web developer to know the characteristics of each elements in HTML. This article briefly explains the difference between the Block elements and the Inline elements in HTML.

Block Elements:

Following are the some of the main features of a block level element.

• An element that takes up full width available, and
• Has a line break before and after it.

Some of the sample elements would be:

<h1>

<h2>

<p>

<ul>

<ol>

<li>

<div>

Inline Elements:

Following are some of the features of and inline element

• An element which takes up only as much width as necessary, and
• Does not force line breaks before and after the elements.

Some of the sample elements would be:

<span>

<a>

<b>

<strong>

<i>

NOTE:

By changing the “display” attribute of these elements, we can achieve the specific requirements. The following is the example using CSS.

li {display:inline}

span {display:block}