Welcome Guest! (App Version 3.1)

websitnero logo name

Display

Display property specifies one of the options in which an HTML elment will be seen -- "block" or "inline". Display: block will set the display type of an element to be block, which would set its behavior in a manner that the element will take full horizontal space available and would not allow the next elment to locate in the same row.

Display: inline will set the behaviour of the HTML element in a way that it takes minimum space horizontally and would allow next html element to align next to it in the same horizontal line (provided the next elmeent is not a block level element which itself would not wish to stand without taking full width available and would rather go to next line by its own wish).

Display: inline-block is a combination of above 2 behaviours.

Display: none would remove the element from dom.

Look at the sections below to have further understanding of various values for 'display' property.

block | contents | flex | flow-root | grid | inline | inline-block | inline-flex | inline-grid | inline-table | inline-item | none | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group

Display Block

Display:Block sets the display property of an element to block. Example: If used on inline elements like span or anchor, it would override their display property and would set it to 'block'.

Note: "By default, elements like divs, paragraphs and section have their display property set as block."

Example

<head>
<style>
span{
  display:block;
}
</style>
</head>

<body> 
<!-- block elements -->
<p>This is a paragraph. </p>
<div>This is a div. </div>
<section>This is a section. </section>

<!-- inline elemnts with display set to block by CSS -->
<span>This is span1.</span>
<span>This is span2.</span>
<span>This is span3.</span>
</body> 

Display Inline

Display: Inline sets the display propoerty of an element to inline. Example: If used on block elements like div or paragraph, it would override their display property and would set it to 'inline'.

Note: "By default, elements like spans, anchors, buttons and textareas have their display property set as inline."

Example

<head>
<style>
p, div, section {
  display:inline;
}
</style>
</head>

<body>
<!-- Inline Elements -->
<span>This is a span. </span>
<a href="#">This is an anchor tag. </a>
<span>This is another span. </span>

<!-- Block Elements, with display set to Inline by CSS -->
<div>This is a div.</div>
<p>This is a paragraph.</p>
<section>This is a section.</section>
</body> 

Display Inline-Block

Display:inline-block is a mix of both of the above behaviors. Most often it is used with block elements such as paragraph or div to act as inline elements yet retain their block-level properties OR inline elements such as anchor or span to take some of the block element properties retaining their own.

Example

<head>
<style>
div{
 display: inline-block;
}
</style>
</head>

<body> 
  <div>This is div 1.</div>
  <div>This is div 2.</div>
  <div>This is div 3.</div>
</body> 

Display None

Display:none will remove the element from the DOM tree.

Example

<head>
<style>
.p2{
  display:none;
}
</style>
</head>

<body> 
  <p class="p1">This is paragraph 1.</p>
  <p class="p2">This is paragraph 2.</p>
  <p class="p3">This is paragraph 3.</p>
</body> 
Further Reading

1. Display property in CSS

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.