CSS Data Type - <display-legacy>

A single-keyword syntax has been used for display property in CSS 2, which required separate keywords for block-level and inline-level variants of the same layout model. This chapter will discuss about these values.

Possible values

The data type <display-legacy> has following valid values:

  • inline-block: A block element box is generated by the element, that will be flowed with surrounding content. Equivalent to inline flow-root.

  • inline-table: No direct mapping in HTML. In behavior it is similar to <table> element, as an inline box and not as block-level box. Equivalent to inline table.

  • inline-flex: Content is laid out as per the flexbox model, where element behaves like an inline element. Equivalent to inline flex.

  • inline-grid: Content is laid out as per the grid model, where element behaves like an inline element. Equivalent to inline grid.

Syntax

<display-legacy> = inline-block | inline-table | inline-flex | inline-grid

CSS <display-legacy> - inline-grid

The following example demonstrates an inline grid container with the legacy keyword inline-grid:

<html>
<head>
<style> 
   .container-legacy {
      display: inline-grid;
      border: 2px solid black;
      background-color: yellow;
      padding: 5px;
      margin: 5px;
   }

   .container-new {
      display: inline grid;
      border: 2px dashed green;
      background-color: peachpuff;
      margin: 5px;
      padding: 5px;
   }
</style>
</head>
<body>
   <h2>inline-grid example</h2>
   <h3>legacy keyword - inline-grid</h3>
   <div class="container-legacy">
      <div>Grid Item 1</div>
      <div>Grid Item 2</div>
   </div>
   <hr>
   <h3>new keyword - inline grid</h3>
   <div class="container-new">
      <div>Grid New 1</div>
      <div>Grid New 2</div>
   </div>
</body>
</html>

CSS <display-legacy> - inline-flex

The following example demonstrates an inline flex container with the legacy keyword inline-flex:

<html>
<head>
<style> 
   .container-legacy {
      display: inline-flex;
      border: 2px solid black;
      background-color: yellow;
      padding: 5px;
      margin: 5px;
   }

   .container-new {
      display: inline flex;
      border: 2px dashed green;
      background-color: peachpuff;
      margin: 5px;
      padding: 5px;
   }
</style>
</head>
<body>
   <h2>inline-flex example</h2>
   <h3>legacy keyword - inline-flex</h3>
   <div class="container-legacy">
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
   </div>
   <hr>
   <h3>new keyword - inline flex</h3>
   <div class="container-new">
      <div>Flex New 1</div>
      <div>Flex New 2</div>
   </div>
</body>
</html>
Advertisements