Display Properties in CSS
Display is an essential CSS property for controlling layout structure / content.
An element with CSS block property, it starts on a new line and stretches to the full width of row from left to right end.
Default block level elements:
- h1 to h6
- table… etc
An element with inline CSS property, it starts on a same existing line without any line break and wrap some text inside it without disrupting flow of row. It just starts on a same existing line and stretches to the text content size. It cannot have a width and height set.
Default inline elements:
- sub, sup… etc
An element with inline-block CSS property, it is positioning as an inline element but it behaves as a block element with defined width and height properties.
Flex layout provides an efficient way to alter its items dimension (width and height), align, distribute space among elements within the document.A flex container expands items to fill available free space, or shrinks them to prevent overflow.
To learn more about flexbox, please access the below link.
An element with table CSS property will acts as a table layout.
An element with a none CSS property will hide the element from view.
An element with an inherit CSS property will apply the parent properties to child element.