14

What is the difference between setting a control's style display: none and display: block?

Michael Irigoyen
  • 22,513
  • 17
  • 89
  • 131
iJade
  • 23,144
  • 56
  • 154
  • 243

9 Answers9

19

The display property defines how a certain HTML element should be displayed. Display block and none are used to show or hide html elements. You can read more about display property and available options here.

  • none: The element will not be displayed at all.

  • block: The element displayed as a block-level element (like paragraphs and headers)

Michael Irigoyen
  • 22,513
  • 17
  • 89
  • 131
Adil
  • 146,340
  • 25
  • 209
  • 204
13

Display:none; - The element is in the DOM but is NOT visible and does not take up any space unlike visibility:hidden.

Display: block; - A block element takes up the full width available and does not allow other elements to be placed beside them. Example: div

Shiridish
  • 4,942
  • 5
  • 33
  • 64
3

These two style properties do two different things.

display: none 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. (The element will generate no box at all)

display: block the element will span the full width of the space available to it. (a line break before and after the element)

Srinivasula Reddy
  • 31
  • 2
1

You are asking about a CSS property i think. This is used to show/hide DOM elements

CSS property is display and the value is 'none', 'block', etc

Referring from : CSS Display as suggested by http://w3fools.com/

block

Object is rendered as a block element.

none

Element is not rendered. The element (it has no effect on layout); all child elements also have their display turned off. The document is rendered as though the element did not exist.

inline

Default. Object is rendered as an inline element sized by the dimensions of the content.

list-item

Internet Explorer 6 and later. Object is rendered as a block element, and a list-item marker is added.

table-header-group

Object is rendered as tHead. Table header is always displayed before all other rows and row groups, and after any top captions. The header is displayed on each document spanned by a table.

table-footer-group

Object is rendered as tFoot. Table footer is always displayed after all other rows and row groups, and before any bottom captions. The footer is displayed on each document spanned by a table.

inline-block

Object is rendered inline, but the contents of the object are rendered as a block element. Adjacent inline elements are rendered on the same line, space permitting.

Murali Murugesan
  • 22,423
  • 17
  • 73
  • 120
1

Display:none; means the element will not be displayed, and Display:block; means the element is displayed as a block-level element (like paragraphs and headers).

Mr_Green
  • 40,727
  • 45
  • 159
  • 271
coder
  • 1,980
  • 3
  • 21
  • 32
1

There is another nuance to display:none; if you dynamically insert a div as a child to a parent div--and you explicitly set the visibility property of the child to "visible", the visibility property of the parent will only make the parent visible/invisible; the child will remain visible, regardless of the parent's visibility setting.

In such a case (where parent/child visibility are set by different style rules), the display:none setting on the parent will hide all the children--even if parent/children are styled independently.emphasized text

Derwood Kirkwood
  • 496
  • 5
  • 8
  • this happened in my last project . use of .css( display none ) then .css(display block) merged to header in table then use .css( visibility hidden ) then .css(visiblity visible) – saber tabatabaee yazdi Oct 24 '17 at 08:14
1

display: none means that the element is not displayed at all (so you won't see it in the example either).

display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise

ravi gupta
  • 11
  • 1
0

Display None: it hides the control. by setting the property of element style="display:none" element will not rendered in webpage and not take place

Display Block: Show the element on web page in block level

Sohail Hameed
  • 978
  • 2
  • 9
  • 25
0

Display none will hide the contains, here if you apply it on div then width and height of div will also hide. Display block will show the contains.

Sky5005e
  • 79
  • 5