Display Properties
This property is used to define how an element should display. Every HTML element
has a default display value depending on what type of element it is. The default
value for most elements is block or inline.
- inline
- block
- flex
- inline-block
- inline-flex
- none
Inline
When we set this value, the element does not start on a new line and only takes up as much width as necessary(we can't set width/height it won't work)
Example:
p{
display : inline;
}
Block
When we set this value, the element always starts on a new line and takes up the full width available(we can set width/height)
Example:
p{
display : block;
}
Flex
Displays an element as a block-level flex container.
Example:
p{
display : flex;
}
Inline-block
It is combination of inline and block value. It doesn't start on new line but we can set width and height.
Example:
p{
display : inline-block;
}
Inline-flex
Displays an element as a block-level flex container.
Example:
p{
display : inline-flex;
}
None
The element will not be displayed at all(has no effect on layout)
Example:
p{
display : none;
}