Welcome Login

Css: display


Css

display property defines how a certain html element should be displayed.

Because of poor browser support, only three display property values ever gets used:

  • inline (default)
  • block
  • none

 

The inline value allows you to define an element to behave as though it were an inline element (like a span or an anchor tag).

Conversely, the block value lets you force block-level behavior (like a div or a paragraph).

And "display: none" simply causes an element to not display at all.

 

Eg: To hide a paragraph

<p style="display: none;">hello world</p>

 

Eg2: inline

<!DOCTYPE html>
<html>

<head>
    <style>
    span#mySpan
    {
      background-color:red;
      display:inline;
    }
    </style>
</head>

<body>
    <span>A span element.</span>
    <span id="mySpan">Another span element.</span>
    <span>Another span element.</span>
</body>

</html>

 

Outputs:

css-display1

 

Eg3: block

<!DOCTYPE html>
<html>

<head>
    <style>
    span#mySpan
    {
      background-color:red;
      display:block;
    }
    </style>
</head>

<body>
    <span>A span element.</span>
    <span id="mySpan">Another span element.</span>
    <span>Another span element.</span>
</body>

</html>

 

Outputs:

css-display2

 

Eg4: list-item

<!DOCTYPE html>
<html>

<head>
    <style>
    span {
        margin-left: 10px;
    }
    span#mySpan
    {
        background-color:red;
        display:list-item;
    }
    </style>
</head>

<body>
    <span>A span element.</span>
    <span id="mySpan">Another span element.</span>
    <span>Another span element.</span>
</body>

</html>

 

Outputs:

css-display3

 

 

Display values:

inline        inline makes the element generate one or more inline boxes.

block         block makes the element generate a block box.

none          A value of none makes the element generate no box at all. 
              Descendant boxes cannot generate boxes either, even if their display property is 
              set to something other than none.



inline-block  inline-block makes the element generate a block box that’s laid out as if it were an inline box.

inline-table  inline-table makes the element behave like a table that’s laid out as if it were an inline box.

list-item     list-item makes the element generate a principal block box and a list-item inline box for the list marker.



run-in        A value of run-in makes the element generate either a block box or an inline box, 
              depending on the context. 
              If the run-in box doesn’t contain a block box, and is followed by a sibling block box (except a table caption) 
              in the normal flow that isn’t, and doesn’t contain, a run-in box, the run-in box becomes the first inline box of
              the sibling block box. Otherwise, the run-in box becomes a block box.



table                 table makes the element behave like a table.

table-caption         table-caption makes the element behave like a table caption.

table-cell            table-cell makes the element behave like a table cell.

table-column          table-column makes the element behave like a table column.

table-column-group    table-column-group makes the element behave like a table column group.

table-footer-group    table-footer-group makes the element behave like a table footer row group.

table-header-group    table-header-group makes the element behave like a table header row group.

table-row             table-row makes the element behave like a table row.

table-row-group       table-row-group makes the element behave like a table body row group.

 

 

 

Differences between 'display: block', 'display: inline' and 'display: inline-block':

Block element:

1. does not tolerate any html elements next to it.

2. forces a line break after the block element. A block element has some whitespace above and below it.

 

Inline element:

1. has no line break before or after it.

2. allows other elements to sit to their left and right, ie: it tolerates html elements next to it.

For more information, see here.

3. respects left and right margins and padding, but NOT top and bottom.

4. cannot have a width and height set.

 

Inline-block element:

'inline-block' is a hybrid that creates a rectangular region (a block), and doesn't create any new lines (hence 'in line'):

1. allows other elements to sit to their left and right. That is, it is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.

2. respects top and bottom margins and padding.

3. respects height and width.

 

 

Example of block, inline and inline-block elements:

Eg:

css-divspan2

 

 

 

Compare with css visibility position property here.

For more information on difference between div and span tags, see here.


Created on: Wednesday, April 13, 2011 by Andrew Sin