diff --git a/css/css-display.org b/css/css-display.org new file mode 100644 index 0000000..9847726 --- /dev/null +++ b/css/css-display.org @@ -0,0 +1,54 @@ +CSS *display* property specifies the display behavior (the type of rendering box) of an element. + +There are different properties for setting the display of an element: + + *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*. The element itself is formatted as an inline + element, but you can apply height and width values + + *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* the element will behave like a *<li>* element + + *run-in* displays an element as either block or inline, depending on context + + *table* the element will behave ike a *<table>* element + + *table-caption* the element will behave like a *<caption>* element + + *table-column-group* the element will behave like a *<colgroup>* element + + *table-header-group* the element will behave like a *<thead>* element + + *table-footer-group* the element will behave like a *<tfoot>* element + + *table-row-group* the element will behave like a *<tbody>* element + + *table-cell* the element will behave like a *<td>* element + + *table-column* the element will behave like a *<col>* element + + *table-row* 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 + +How to use the *display* property in your css class: +display: value; \ No newline at end of file