/* legacy values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;
/* box generation */
display: none;
display: contents;
/* two-value syntax */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;
/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;
/* Global values */
display: inherit;
display: initial;
display: revert;
display: unset;
inline: Displays an element as an inline element (like <span>). Any height and width properties will have no effect;
block: Displays an element as a block element (like <p>). It starts on a new line and takes up the whole width;
contents: Makes the container disappear making the child elements children of the element the next level up in the DOM;
flex: Displays an element as a block-level flex container;
grid: Displays an element as a block-level grid container;
inline-block: Displays an element as an inline-level block container;
inline-flex: Displays an element as an inline-level flex container;
inline-grid: Displays an element as an inline-level grid container;
inline-table: The element is displayed as an inline-level table;
list-item: Let the element behave like a <li> element;
run-in: Displays an element as either block or inline depending on context;
table: Let the element behave like a <table> element;
table-caption: Let the element behave like a <caption> element;
table-column-group: Let the element behave like a <colgroup> element;
table-header-group: Let the element behave like a <thead> element;
table-footer-group: Let the element behave like a <tfoot> element;
table-row-group: Let the element behave like a <tbody> element;
table-cell: Let the element behave like a <td> element;
table-column: Let the element behave like a <col> element;
table-row: Let the element behave like a <tr> element;
none: The element is completely removed;
initial: Sets this property to its default value;
inherit: Inherits this property from its parent element;.d_in {
display: inline;
/* This causes a block-level element to act like an inline element. */
}
.d_b {
display: block;
/* This causes an inline element to act like a block-level element. */
}
.d_in_b {
display: inline-block;
/* This causes a block-level element to flow like an inline element
Compared to display: inline, the major difference is that
display: inline-block allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings
are respected, but with display: inline they are not.
*/
}
.d_n {
display: none;
/* This hides an element from the page. */
}
/******************* BASIC BLOCK DISPLAY **********************/
/**************** Block display Elements *********************/
/*Elements that block any other elements from being in the
same line. You can change the width from being the maximum
width of the page, but you can´t put elements side by side */
tag_name {
display: block;
}
/*Exemple of default block display elements:*/
<h1> ... </h1>
<p> ... </p>
/**************** Inline display Elements *********************/
/*They are the type of blocks that only take up the minimum space
required (both in width and height). You can place these types of
blocks side by side (on the same line) but you cannot change their
dimensions */
tag_name {
display: inline;
}
/*Exemple of default inline display elements:*/
<spans> ... </spans>
<img> ... </img>
<a> ... </a>
/************* Inline-block display Elements *****************/
/*They take the best of the two other types above. You can put
elements side by side (on the same line) and you can change this
block width and height */
tag_name {
display: inline-block;
}
/***************** None display Elements ********************/
/*This block will never appear on your webpage and will never
interact with the other elements (it doesn't take up space) */
tag_name {
display: none;
}
display: none;
display: block;
display: inline;The display property specifies the display behavior
(the type of rendering box) of an element. In HTML, the default display
property value is taken from the HTML specifications
or from the browser/user default style sheet.