Inline and block elements

While creating an HTML page, it is important to understand the difference between the 2 elements categories inline and block to avoid coding errors and impost the CSS for the best.

Those 2 words, ‘block’ and ‘inline’ are explicit enough by themselves..

• block: an element which forms a separate block
• inline: an element which stays inline with the rest of the content

Block element

A block element has the following characteristics:

• Forms a block and positions itself vertically underneath with a new empty line above and under
• Takes all the available width based on the measure of its parent element (container)
• Its height changes in rapport to its content
• Can contains other inline and/or block elements (es: a <p> inside a <div>)
• Via css, we can impost a fixed width and/or height
• Example of natural html block element: <div>, <h1>…<h6>, <p>, <ul>, <ol>, <dl>, <table>, <blockquote>, <form>

Inline elements

An inline element has the following characteristics:

• Positions itself horizontally inline with the rest of the content of its parent element (container)
• Takes the minimum width and height in rapport to its content
• Can contains ONLY other inline elements (es: an <img/> inside a <a>)
• Via css, we can NOT impost fixed measure
• Example of natural html inline elements: <span>, <a>, <strong>, <em>, <img />, <abbr>, <acronym>

Using the css display:block; and display:inline;, we can change the property of the element from block to inline or from inline to block.

Concrete examples of block and inline elements

1. A paragraph (html block element <p>) at its natural state:

The width equals the one of the container
The height equals the one of its content.

 

2. A paragraph with fixed measure:

The width equals 300px (width:300px;), the height equals 100px (height:100px;).

 

3. A paragraph converted into an inline element using display:inline;

This paragraph is now an inline element. The width and height are at their minimum in rapport to its content.

 

4. A link (html inline element <a>) at its natural state

The width and height are at their minimum in rapport to its content

 

5. A link with fixed measure (to demonstrate that it does NOT work)

We can NOT impost a fixed width and/or height to an inline element.
NB: Internet Explorer applies the fixed measure by error of interpretation of the css specifics. It should not be so!

If you need, to give fixed measure to an inline element, you should add the display:block;

 

6. A link converted into a block element using display:block;

This link is now a block element.


The width equals the one of its container.


The height equals the one of its content.