Please enable Javascript to correctly display the contents on Dot Net Tricks!

CSS Inline, block and none display style

  Author : Shailendra Chauhan
Updated On : 10 Jul 2012
Total Views : 7,006   
 

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.

YOU MIGHT LIKE
Free Interview Books
 
COMMENTS (0)
14 DEC
ASP.NET MVC with AngularJS Development (online)

MON-FRI 07:30 AM- 09:00 AM IST

Know More
5 DEC
AngularJS Development (online)

Mon - Fri     6:30 AM-7:30 AM IST

3 DEC
AngularJS Development (offline)

SAT,SUN     11:00 AM-12:30 PM IST

3 DEC
MEAN Stack Development (offline)

Sat, Sun     (09:30 AM-11:00 AM IST)

26 NOV
ASP.NET MVC with AngularJS Development (offline)

(SAT,SUN)     03:30 PM-05:00 PM IST

24 NOV
ASP.NET MVC with AngularJS Development (online)

MON-FRI     09:30 PM-11:00 PM IST

12 NOV
ASP.NET MVC with AngularJS Development (offline)

SAT,SUN     08:00 AM-09:30 AM

3 NOV
ASP.NET MVC with AngularJS Development (online)

MON-FRI     07:30 AM-09:00 AM IST

25 OCT
.NET Development (offline)

Mon-Fri     9:00 AM-11:00 AM IST

BROWSE BY CATEGORY
 
RECENT ARTICLES
SUBSCRIBE TO LATEST NEWS
 
LIKE US ON FACEBOOK
 

Professional Speaks

+