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

CSS Inline, block and none display style

  Author : Shailendra Chauhan
Posted On : 14 Jun 2012
Total Views : 7,661   
Updated On : 10 Jul 2012
 

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.



Free Interview Books
 
COMMENTS (0)
6 JUN
Hadoop Development cum Administration (Online)

7:00 AM-9:00AM IST

Know More
30 MAY
ASP.NET MVC with Angular4 Development (Online)

09:00 PM-11:00 PM IST(+5.30 GMT)

Know More
30 MAY
ASP.NET MVC with Angular4 Development (Online)

09:00 PM-11:00 PM IST(+5.30 GMT)

28 MAY
ASP.NET Core with Angular4 Development (Classroom)

10:30 AM-11:30 AM Weekend

27 MAY
ASP.NET MVC with Angular4 Development (Classroom)

4:00 PM-5:30 PM Weekend

20 MAY
Angular2 and Angular4 Development (Online)

08:00 AM-10:00 AM IST(+5.30 GMT) Weekend

20 MAY
NodeJS with Angular4 Development (Classroom)

5:00 PM-6:30 PM Weekend

8 MAY
ASP.NET MVC with Angular4 Development (Online)

07:00 AM-09:00 AM IST(+5:30 GMT) M/W/F

2 MAY
ASP.NET Core Development (Online)

07:00 AM - 09:00 AM IST( TUS, THR)

29 APR
ASP.NET MVC with Angular2 Development (Classroom)

9:30 AM-11:00 AM

22 APR
MEAN Stack 2 Development (Classroom)

11:00 AM-12:30 PM Weekend

10 APR
Master Class ASP.NET MVC 5 with Angular2 Plus Angular4 Development (Online)

09:00 PM - 11:00 PM IST (M/W/F)

BROWSE BY CATEGORY
 
 
LIKE US ON FACEBOOK
 
+