Display property in CSS is the property that determines how the element will flow with the rest of the elements on the page. Since all elements are essentially various sized rectangles, the display property allows us to indicate how we want each rectangle to meld with other rectangles.
For instance, the default property for display is ‘inline’. For instance, if you took text in a
and wrapped a portion of it in a , that span would default to inline, and it would not break the flow of the text. You could color the background of the span if you wanted, and also set specific margin and padding, however inline elements do no accept input for width and height.
‘Inline-block’ is similar, in that it will not interrupt the flow, but you may add inputs for width and height, to further separate and draw attention to the element.
‘Block’ is a property that is set by default on a number of elements in the browser UA stylesheet. A block element will break past any other items that are inline with it. An element set to display: block; will take up as much width as it can in its parent element, unless otherwise specified.
‘None’ is a property that display will accept that will totally remove the item from the page. It will still remain in the DOM but it will be inaccessible to tab to, and will be ignored by screen readers.
Other lesser used properties to set display to are Run-in, Flex, Grid, and table values. Run-in doesn’t work with firefox and is a niche way to allow a header element to remain inline with the text that would usually be below it. Flex and flexbox give the container the ability to flex and change in order to best use the available space. The Grid property is a two dimensional grid based layout module that is optimized for user interface design. Finally, table values are an input for display that will force non-table elements to act like table elements, if you need them to.