display Property Values
Value | Description |
---|---|
none | The element will generate no box at all |
block | The element will generate a block box (a line break before and after the element) |
inline | The element will generate an inline box (no line break before or after the element). This is default |
inline-block | The element will generate a block box, laid out as an inline box |
inline-table | The element will generate an inline box (like <table>, with no line break before or after) |
list-item | The element will generate a block box, and an inline box for the list marker |
run-in | The element will generate a block or inline box, depending on context |
table | The element will behave like a table (like <table>, with a line break before and after) |
table-caption | The element will behave like a table caption (like <caption>) |
table-cell | The element will behave like a table cell |
table-column | The element will behave like a table column |
table-column-group | The element will behave like a table column group (like <colgroup>) |
table-footer-group | The element will behave like a table footer row group |
table-header-group | The element will behave like a table header row group |
table-row | The element will behave like a table row |
table-row-group | The element will behave like a table row group |
inherit | Specifies that the value of the display property should be inherited from the parent element |
visibility Property Values
Value | Description |
---|---|
visible | The element is visible. This is default |
hidden | The element is invisible (but still takes up space) |
collapse | Only for table elements. collapse removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If collapse is used on other elements, it renders as "hidden" |
inherit | Specifies that the value of the visibility property should be inherited from the parent element |
We can know from above:
visibility: hidden hides the element, but it still takes up space in the layout.
and
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.
Notice: if the display property is not explicitly set, it defaults to the display type the element normally has.
You also can refer here to see how they look “Set visibility: hidden on the image” and “Set display: none on the image”.