How to display an HTML element.
Syntax
display: display_mode ;
Display_Modes:
block - Take up the full width available, with a new line before and after.
box - Display as a block-level flex container box (also flex-box or flex )
inline - One or more inline boxes, does not force new lines, this will display List Items as a horizontal row.
inline-block - A block box that’s laid out as if it were an inline box (but preserving block capabilities such as setting width, height, top and bottom margins / paddings etc).
inline-flex - Display as an inline-level flex container box
inline-table - Behave like a table laid out like an inline box.
list-item - A principal block box and a list-item inline box for the list marker (bullet).
run-in - By default a block box, if the run-in box doesn’t contain a block box, and is followed by a sibling block box (not a run-in box), the run-in box becomes the first inline box of the sibling block box.
table - Behave like a table.
table-caption - Behave like a table caption.
table-cell - Behave like a table cell.
table-column - Behave like a table column.
table-column-group - Behave like a table column group.
table-footer-group - Behave like a table footer row group.
table-header-group - Behave like a table header row group.
table-row - Behave like a table row.
table-row-group - Behave like a table body row group.
none - Generate no box at all, not even for descendant boxes no matter what their display: property is set to.
inherit - Inherit the property from a parent element.
If an element’s display property is set to none, no box is generated and so float and position are ignored.
When working with table objects (rows, row groups, columns, and column groups), visibility:collapse should be used in preference to display: none, this will keep the structural integrity of the table intact.
By default PRE elements are displayed as block, to display them without the spacing before/after, (like <P>) apply pre { display: inline; }
To centre an image or block element horizontally set display: block; and then set both the left and right margins to auto: margin-left: auto; margin-right: auto;
Displaying images - when a browser is running in "Standards" mode, the line box always contains space for character descenders below the baseline. This will cause a small gap to appear below the image. Setting img {display: block;} or img {vertical-align:bottom;}will prevent the image from being treated as an inline element, thus removing the extra vertical space.
Examples:
li { display: inline; }
.emw3class {
display: none; }
#emw3id { display: block; }
Try it:
Browser Support: IE8+, Opera 9.2+ some browsers do not render all values correctly see Quirksmode or Caniuse
“People who know little are usually great talkers, while men who know much say little” ~ Jean Jacques Rousseau
Related:
float - Shift to the left (or right) allowing other content to flow/wrap alongside.
visibility - Hide or show an element.