Mastering The Display Property in CSS

Getting a better sense of how layout works on the web

Photo by Pankaj Patel on Unsplash

What Is The Display Property?

According to MDN, “The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid, or flex”.

Inline vs. Block

Most web pages on the internet follow what is called Normal Flow or Flow Layout in terms of how the page renders content on a user’s screen. The flow is determined by all of the elements of a web page working together to know where other elements are and where they should be to present a logical order to create a page's layout.

Display Values and Their Effects

Inline

Using display: inline; displays an element as an inline element, similar to how a <span> would render. This means that the element will not generate a line break before or after itself and that in normal flow, it will be on the same line with any of its siblings.

Block

display: block; will turn an element into a block element and create a line break before and after it in the document's normal flow. This means that no other element will share space horizontally with the element.

Inline-Block

What if we want to create an element that sits inline with other elements but needs a specific height and width? This is where display: inline-block; comes in. Elements that are displayed as inline-block sit inline with surrounding elements, but their height and width values will be respected.

Run-in

Run-in is similar to text-decoration at the beginning of magazine articles where the first few letters or words are slightly larger and surrounded by text on their right side and bottom. CSS-Tricks describes it as a “header that sits inline with the text below it.”

Flexbox

display: flex; treats an element like a block element, but lays out its content according to the flex model. In the flex model, children of a container can be easily moved around the containing element to fill space, making it great for building unique user interfaces.

Grid

And finally, grid. display: grid; initializes the grid layout for an element’s children. Grid layout allows you to break a page up into major regions and be hyper-specific about where those regions should be in relation to others.

Music Fanatic, Software Engineer, and Cheeseburger Enthusiast. I enjoy writing about music I like, programming, and other things of interest.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store