Prelims CSS - Display Flashcards
property is used to specify how an element is shown on a web page.
display
ALWAYS starts on a new line and takes up the full width available (stretches out to the left and right as far as it can)
A block-level element
Examples of block-level elements:
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
</section></footer></header></form></p></h6></h1></div>
DOES NOT start on a new line and only takes up as much width as necessary.
An inline element
Examples of inline elements:
<span>
<a>
<img></img></a></span>
Displays an element as an inline element
inline
Displays an element as a block element
block
Makes the container disappear, making the child elements children of the element the next level up in the DOM
contents
Displays an element as a block-level flex container
flex
Displays an element as a block-level grid container
grid
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-block
Displays an element as an inline-level flex container
inline-flex
Displays an element as an inline-level grid container
inline-grid
The element is displayed as an inline-level table
inline-table
Let the element behave like a <li> element
list-item
Displays an element as either block or inline, depending on context
run-in
Let the element behave like a <table> element
table
Let the element behave like a <caption> element
table-caption
Let the element behave like a <colgroup> element
table-column-group
Let the element behave like a <thead> element
table-header-group
Let the element behave like a <tfoot> element
table-footer-group
Let the element behave like a <tbody> element
table-row-group
Let the element behave like a <td> element
table-cell
Let the element behave like a <col> element
table-column
Let the element behave like a <tr> element
table-row
The element is completely removed
none
