CSS Data Type - <display-outside>

An element's outer display type, which is essential in flow layout, is determined by the <display-outside> keywords. The display property takes these keywords as values.

Possible values

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

  • block: A block element box is generated by the element, which in turn generates line breaks before and after the element, in the normal flow.

  • inline: One or more inline element boxes are generated by the element, which do not generate any line breaks before or after the element. The next element will be in the same line, if there is a space available, in a normal flow.

Note: The browsers that support the two-value syntax, will default the inner value to flow, when only outer value, like display: block or display: inline is specified.

Syntax

<display-outside> = block | inline

CSS <display-outside> - block Value

The following example demonstrates a span element, which is normally displayed as inline, will be set to be displayed as block element, using the keyword block:

<html>
<head>
<style>
   .span-block {
      display: block;
      background-color: aqua;
      border: 1px solid black;
   }
   .span-default {
      background-color: peachpuff;
   }
</style>
</head>
<body>
   <h2><display-outside></h2>
   <div>
      <span class="span-block">I am a span.</span> <span class="span-block">I am span displayed as block.</span>
      <span class="span-default">I am a default inline span.</span> <span class="span-default">Inline span.</span>
   </div>
</body>
</html>
Advertisements