CSS Data Type - <display-box>

Quiz

CSS <display-box> data type determines if an element creates display boxes or not.

Possible Values

contents − Display of the element is replaced by its contents, i.e. its children and pseudo-box.
none − Turns off the display of the element and its descendants.

Syntax

<display-box> = contents | none;

CSS <display-box> - none

The following example demonstrates that display: none property hides an element −

<html>
<head>
<style>
   div {
      height: 100px;
      width: 100px;
      background-color: pink;
   }
   .box {
      display: none;
   }
</style>
</head>
<body>
   <p>The second box is invisible due to the "display: none;"</p>
   <div>Box 1 (Visible)</div>
   <div class="box">Box 2 (Invisible)</div>
</body>
</html>

CSS <display-box> - contents

The following example demonstrates that display: contents property makes child elements of the container appear as direct children of the body, visually displaying two boxes side by side −

<html>
<head>
<style>
   div {
      height: 100px;
      width: 100px;
      background-color: pink;
   }
   .box {
      display: content;
   }
</style>
</head>
<body>
   <p>The second box is invisible due to the "display: none;"</p>
   <div>Box 1 (Visible)</div>
   <div class="box">Box 2 (Now Visible)</div>
</body>
</html>

Print Page