CSS DISPLAY

The CSS specification defines the default display value for all the elements, e.g. the <div> element is rendered as block, while the <span> element is displayed inline.

Changing the Default Display Value

Overriding the default display value of an element is an important implication of the displayproperty. For example, changing an inline-level element to be displayed as block-level element or changing the block-level element to be displayed as an inline-level element.

Display Block

The block value of the display property forces an element to behave like block-level element, like a <div> or <p> element. The style rules in the following example displays the <span> and <a> elements as block-level elements:

EXAMPLE

1.	span {
2.	    display: block;
3.	}
4.	a {
5.	    display: block;
6.	}

Display Inline

The inline value of the display property causes an element to behave as though it were an inline-level element, like a <span> or an <a> element. The style rules in the following example displays the <p> and <li> elements as inline-level elements:

EXAMPLE

1.	p {
2.	    display: inline;
3.	}
4.	ul li {
5.	    display: inline;
6.	}

Display Inline-Block

The inline-block value of the display property causes an element to generate a block box that will be flowed with surrounding content i.e. in the same line as adjacent content. The following style rules displays the <div> and <span> elements as inline-block:

EXAMPLE

1.	div {
2.	    display: inline-block;
3.	}
4.	span {
5.	    display: inline-block;
6.	}

Display None

The value none simply causes an element to generate no boxes at all. Child elements do not generate any boxes either, even if their display property is set to something other than none. The document is rendered as though the element did not exist in the document tree.

EXAMPLE

1.	h1 {
2.	    display: none;
3.	}
4.	p {
5.	    display: none;
6.	}

CSS Visibility

Controlling the Visibility of Elements

You can use the visibility property to control whether an element is visible or not. This property can take one of the following values listed in the table below:

ValueDescription
visibleDefault value. The box and its contents are visible.
hiddenThe box and its content are invisible, but still affect the layout of the page.
collapseThis value causes the entire row or column to be removed from the display. This value is used for row, row group, column, and column group elements.
inheritSpecifies that the value of the visibility property should be inherited from the parent element i.e. takes the same visibility value as specified for its parent.

The style rule visibility: collapse; however removes the internal table elements, but it does not affect the layout of the table in any other way. The space normally occupied by the table elements will be filled by the subsequent siblings.

CSS Visibility vs Display

The display and visibility CSS properties appear to be the same thing, but they are in fact quite different and often confuse those new to web development.

  • visibility: hidden; hides the element, but it still takes up space in the layout. Child element of a hidden box will be visible if their visibility is set to visible.
  • display: none; turns off the display and removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code. All child elements also have their display turned off, even if their display property is set to something other than none.
Categories: CSS