Mastering The Display Property in CSS
Recently, I published a blog post outlining why I chose to use Gatsby as the foundation for my portfolio site. While I’m still happy with that decision, the process has taken a little longer than I anticipated.
Between the learning curve of using a new framework, the thoroughness required for building a fully responsive design, and juggling the development of a new project with some much needed time off, this thing still needs some work before it’s ready to be shared with the internet.
With that said, building my own portfolio from scratch has been an amazing learning experience, and I want to take a moment to share with you some things I’ve learned while working on it. Specifically, I’d like to talk to you about the
display property in CSS, as it helped me a TON while structuring the layout of my site.
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”.
As we know, pretty much every HTML element on a web page is a rectangular box (see: Box Model). These boxes can have parent elements and child elements, and both can influence their appearance in different ways. The
display property in CSS allows you to determine how a box behaves in the normal flow of a web page despite any outside forces, as well as the layout of its children.
Before we get into what options
display provides when it comes to layout options, let’s cover some basics in terms of how elements are rendered in the flow of HTML documents.
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.
It’s important to know that some elements can be taken out of this normal flow and can operate independently.
With that being said, in normal flow, elements are either rendered as inline elements or block elements.
Inline elements render inline, similar to how the words in this sentence are rendered one after another in a line (the direction of inline elements is impacted by the Writing Mode of a user’s machine). On the other hand, block elements are rendered one after another vertically in blocks — similar to the paragraphs on this very page.
If you’ve worked with HTML in the past, you’ve surely noticed that different types of elements have default
display values, with some tags always rendering inline and others rendering as blocks. Keeping all of this in mind, the
display property allows us to change an element’s default
display value to create a unique layout.
There are a lot of options available, so let’s review each of the most common ones.
Display Values and Their Effects
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.
It’s important to note that if an element is set to display as
inline, any defined values for
width are ignored. If you want to create space around the element, you are free to use margin and padding to do so.
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.
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
width values will be respected.
This value can be especially helpful for creating columns in your layout without resorting to tables. However, keep in mind that as you add more elements to a container element, elements that extend beyond their parent's width will be forced onto a new line.
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.”
This can be helpful for unique text layout, but keep in mind that
run-in is not supported by Firefox, which slightly limits the utility of this value.
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.
If you pair
justify-content: space-between; with
display: flex; , for example, you can equally space out different pieces of content within a container.
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.
This can be useful when designing a page that contains a large amount of information, such as blogs or news sites.
While I’d used the
display property in the past, getting a better understanding of how it worked made a huge difference in how I approach building the layout for my portfolio. There are many more values and options available to you with the
display property, but hopefully, you’ve found this post to be a helpful primer for using it in your own projects.
Thanks for reading!
(P.S. I’m looking for a new role these days. Feel free to reach out to me on Twitter if you’d like to discuss any opportunities you think I’d be a good fit for, or if you’d simply like to connect.)