CSS display
property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block
or inline
.
CSS Display Values
/* 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: unset;v
CSS Display- elements:
A block-level element 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).
Examples of block-level elements:
- <div>
- <h1> – <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
CSS Display Inline:
An element set to inline-block
is very similar to inline in that it will set inline with the natural flow of text (on the “baseline”). The difference is that you are able to set a width
and height
which will be respected.
li { display: inline; }
Comments are closed.