CSS Inline, block and none display style

During creation of an HTML page using CSS, it is essential to know the HTML elements display behavior. HTML elements have three display style options inline, block and none. Each option has its significant in the designing of HTML page.

The basic difference among these display options is very important to know in order to use CSS efficiently. In this article, I will expose the basic difference among these display options.

1. Block

   1. Block display elements makes a separate block with a new line before and after.

   2. It takes the full available width based on its parent element or container.

   3. Using CSS we can fix height and width of block elements.

   4. It can have other inline or block elements.

   5. <div>, <h1>…<h6>, <p>, <ul>, <ol>, <dl>, <li>, <dt>, <dd>,<table>, <blockquote>, <pre>,<form> are displayed as block naturally.

2. Inline

   1. Inline display elements stay with the flow of the document and don’t force the new line.

   2. It takes the width as it needs.

   3. Using CSS we can’t fix height and width of inline elements.

   4. It can have only inline elements.

   5. <span>, <a>, <strong>, <em>, <img />, <abbr>, <acronym>, <br>,<input> are displayed as inline naturally.

3. None

   1. Some tags, like <meta />,<script> and <style> are not visible naturally.

We can change the display style of block elements to inline and vice-versa.

Examples of block and inline elements

1. A paragraph (html block element <p>)

   Paragraph width will be equal to the container width
   Paragraph height will be equal to its content.

2. A paragraph with fixed height and width

   The width will be equal to 450px (width:450px;), and the height will be equal to 150px (height:150px;).

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

   This paragraph is now an inline element. The width and height taken by it will be acc. to its content.

4. An anchor tag (html inline element <a>)

   The width and height taken by it will be acc. to its content.

5. An anchor tag with fixed height and width(to show that it does not work)

   We can’t set a fixed width and/or height to an inline element.

6. An anchor tag converted into a block element using display:block;

   This anchor tag is now a block element.
   The width will be equal to the its container.
   The height will be equal to the its content.

Summary

In this article I try to expose the display property of elements with simple examples. I hope after reading this article you will be able to make a good html design. I would like to have feedback from my blog readers. Please post your feedback, question, or comments about this article.

Further Reading