CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Questions

What is Bootstrap CSS What is CSS used for How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language How to edit CSS in WordPress How to use google fonts in CSS How to create blinking text using CSS How to Set Space between the Flexbox Is CSS a Programming Language

Difference

Difference between HTML and CSS Grid Vs Flexbox in CSS Difference between CSS Grid and CSS Flexbox

Misc

Create a 3D text effect using HTML and CSS Hover condition for a:before and a:after in CSS Bem CSS Boder Types CSS Features of CSS Font Face CSS Image Overlay CSS B Tag CSS Carousel CSS CSS Arrow CSS Focus Flex Grow in CSS Bem CSS Features of CSS Font Face CSS Removing Underline from Link in CSS Width Property in CSS Radio Button in CSS

CSS Display
2020-05-08 06:56:36

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.