CSS Inline, block and none display style

CSS Inline, block and none display style

22 Dec 2023
Intermediate
8.79K Views
3 min read

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.

Share Article
Batches Schedule
About Author
Shailendra Chauhan (Microsoft MVP, Founder & CEO at Scholarhat by DotNetTricks)

Shailendra Chauhan is the Founder and CEO at ScholarHat by DotNetTricks which is a brand when it comes to e-Learning. He provides training and consultation over an array of technologies like Cloud, .NET, Angular, React, Node, Microservices, Containers and Mobile Apps development. He has been awarded Microsoft MVP 8th time in a row (2016-2023). He has changed many lives with his writings and unique training programs. He has a number of most sought-after books to his name which has helped job aspirants in cracking tough interviews with ease.
Self-paced Membership
  • 22+ Courses
  • 750+ Hands-On Labs
  • 300+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A
  • 10+ Real-world Projects
  • Career Coaching
  • Email Support
Upto 66% OFF
KNOW MORE..

To get full access to all courses

Accept cookies & close this