Logo
×

CSS Display

CSS Display: The CSS Display property is one of an essential property among all other properties of CSS. The display property specifies how the HTML elements should be displayed on the page.

All the elements of HTML contain a display value as the default value. It leans on the element type, which we use. The inline and block values are used for most of the elements.

Default properties of CSS display

  • version: css1
  • inherited: no
  • animation supporting: no
  • default value: inline
  • javascript syntax: object.style.display=”none”

Display Values

Some commonly used display values are as below:

  1. display: none;
  2. display: inline;
  3. display: block;
  4. display: inline-block;
  5. display: run-in;

Display none

The display none value is used to remove the HTML elements from web pages. They will not hold any space. These elements are generally applied with JavaScript language to show and hide the elements without recreating and deleting them.

 <!DOCTYPE html>
   <html>
   <head>
   <style>   p.none {   display: none;   }   </style>
   </head>
   <body>   <h1>This heading will visible.</h1>
   <p class="none">This will not   visible.</p>
   <p>We can see that the hidden heading does not   contain any space.</p>
   </body>
   </html>
CSS Display

Display inline

The display inline holds only the width as much as required. These types of elements do not begin on the new line. Hence, the flow of text does not break.

Some inline elements can be as follows:

  • <a>
  • <b>
  • <img>
  • <span>

Example:

    <!DOCTYPE html>
   <html>
   <head>
   <style>   p.inline {   display: inline;   }   </style>
   </head>
   <body>
   <h1>This is an example of inline display   value.</h1>
   <p class="inline">Java   Language.</p>
   <p class="inline">CSS   Language.</p>
   <p class="inline">C++   Language.</p>
   <p class="inline">Python   Language.</p>
   </body>
   </html>
CSS Display

Display block

The display block always begins on the new line. It holds-up the entire available width (stretches out towards left and right as much as these elements can). A display block element is a <div> element.

Some examples of display block elements are as below:

  • <div>
  • <p>
  • <form>
  • <section>
  • <footer>
  • <header>
  • <h1> - <h6>

 Example:

<!DOCTYPE html>
   <html>
   <head>
   <style>   p {   display: block;   }   </style> 
  </head>
   <body>
   <h1>This is an example of block display   value.</h1>
   <p>Java Language.</P>  
 <p>C++ Language.</P> 
  <p>Python Language.</P> 
  <p>C Language.</p>  
 <p>JavaScript Language.</p>
</body>   
</html>
CSS Display

Display Inline-Block

The inline-block CSS elements are quite similar to the inline elements. The main difference between the both is that we can set the height and width in inline-block element.

Example:

 <!DOCTYPE html>
   <html>
   <head>
   <style>  p {   display: inline-block;   }   </style>
   </head>
   <body>
   <h1>This is an example of   inline-block display value.</h1>
   <p>Java   Language.</p>
   <p>CSS   Language.</p>
   <p>C++   Language.</p>
   <p>Python   Language.</p>   
</body>   
</html>
CSS Display

Display run-in

The display run-in elements can’t work with Mozilla Firefox. They don’t generate a particular box.

  • If a run-in box includes the block box, it will be similar as block.
  • If a block box pursues a run-in box, it will be the block box’s initial inline box.
  • If inline box pursues a run-in box, it will become the block box.

Example:

 <!DOCTYPE html>
   <html>
   <head>
   <style>   p {   display: run-in;   }   </style>
   </head>
   <body>   
<h1>This is an example of run-in display   value.</h1>
   <p>Java Language.</p>
   <p>CSS Language.</p>
   <p>C++ Language.</p>
   <p>Python Language.</p>
   <p>CSS Style.</p>
   </body>
   </html>
CSS Display

Other Display Values of CSS

Property-value Description
flex It is applied to show a tag as a container of block-level flex. Flex is a new value in CCS3.
Inline-flex It is applied to show a tag as a container of inline-level flex. Inline-flex is a new value in CCS3.
Inline-table It shows a tag as a table in the inline-table.
list-item It enables a tag to behave as a <li> tag.
table It enables a tag to behave as a <table> tag.
table-caption It enables a tag to behave as a <caption> tag.
table-column-group It enables a tag to behave as a <colgroup> tag.  
table-header-group It enables a tag to behave as a <thead> tag.  
table-footer-group It enables a tag to behave as a <tfoot> tag.  
table-row-group It enables a tag to behave as a <tbody> tag.  
table-cell It enables a tag to behave as a <td> tag.
table-row It enables a tag to behave as a <tr> tag.
table-column It enables a tag to behave as a <col> tag.

Related Topics

CSS Text-stroke

Text-stroke Text-stroke CSS property inserts the stroke to any text and gives a decoration option to them also. It describes the stroke’s width and color for various text characters. It is...

2 minutes read.

CSS Lists

CSS Lists: Several properties are available in CSS that are used to manage the lists. Lists are distributed as ordered and unordered kind of lists. The ordered lists provide the...

7 minutes read.

CSS Margin

CSS Margin: The CSS margin property is employed to describe the space throughout the elements. It clears the range throughout the element. These properties do not have a background color...

2 minutes read.

CSS Align

CSS Center Align Elements CSS center align is used to create align by using block element. You should specify margin: auto;properties. The element will take up the specified width and the remaining space....

2 minutes read.

What is a CSS File?

What is a CSS File and How to use it in Html? CSS: - CSS stands for Cascading Style Sheet. CSS is a file of style sheets that describe the presentation of...

4 minutes read.

Css Text Orientation

Introduction: The text-orientation property of CSS is used to specify the orientation of the text characters in the line of content. This property applies only with the vertical writing-mode and not...

4 minutes read.

CSS :root selector

CSS :root selector This CSS pseudo-class matches any document’s root element. It chooses the parent of the highest-level inside the document DOM or tree. An element of <html> is always a...

2 minutes read.

How to center a button in CSS

How to center a button in CSS? In the tutorial, we will learn how to center a button in CSS. CSS (Cascading Style Sheets) gives an HTML web page the greatest possible...

4 minutes read.

CSS Masking

CSS Masking The CSS mask property is applied to hide a component with the use of the masking or clipping an image at any specific point. The masking depicts the use...

3 minutes read.

CSS Arrow

CSS Arrow The arrow of CSS is applied to insert an array with the tooltip. It can make a tooltip as any speech bubble. Also, this arrow can be illustrated in...

4 minutes read.

CSS Order

CSS Order CSS order property in CSS describes the flex item’s order inside the flex or any grid container. It is applied to order any flex item. Note: If any component is...

3 minutes read.

CSS Word-spacing

Word-spacing The work-spacing property of CSS is applied to manage the space among the words. We can decrease or increase the space among the words by the use of this property. It...

3 minutes read.

CSS Counters

CSS Counters: The CSS counter property is similar to the variables. CSS counters are controlled via CSS, and its values are incremented via rules of CSS to record how much...

4 minutes read.

CSS Pseudo-elements

Pseudo-elements The pseudo-classes in CSS can be represented as any keyword which is connected to the selector that represents any selected element’s unique state. On the other hand, pseudo-elements can be...

6 minutes read.

CSS translate() Function

Translate() CSS function This function in CSS is a CSS in-built function. It relocates the element in the horizontal direction or in the vertical direction. It can move the items from...

2 minutes read.

CSS Clip

CSS Clip The Clip property in CSS describes the element’s visible area. It applies over the elements which are absolutely positioned (position: absolute ;). Generally, it is used when an image...

2 minutes read.

CSS Background Color

It is one of the CSS properties to apply styling to html elements.This property is used to apply the background color to any HTML element.The background of an element includes...

2 minutes read.

Hover condition for a:before and a:after in CSS

In CSS, :after and :before are used to add content after and before the element. The CSS pseudo-class is used to add some styling effect to the webpage. We can change...

4 minutes read.

CSS Flex-Box

Introduction The flex-box property of CSS stands for Flexible Box Layout Module. It is specifically used to design a flexible responsive layout. Flex-box is a one dimensional layout model, i.e. it works...

6 minutes read.

CSS User Interface

Introduction User Interface can be defined as series of visual elements like screens, buttons, forms that help the user interact with the software application or hardware device. CSS User Interface allows the...

6 minutes read.