CSS Display Properties

Display Properties in CSS

Display is an essential CSS property for controlling layout structure / content.

Display: block

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:

  • div
  • ul
  • p
  • header
  • footer
  • section
  • fieldset
  • h1 to h6
  • table… etc

Display: Inline

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:

  • span
  • a
  • strong
  • img
  • label
  • input
  • select
  • textarea
  • button
  • sub, sup… etc

Display: inline-block

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.

CSS Position properties

Display: flex

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.
http://flexbox.help/

Display: table

An element with table CSS property will acts as a table layout.

Display: none

An element with a none CSS property will hide the element from view.

Display: inherit

An element with an inherit CSS property will apply the parent properties to child element.

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *