Control how the elements of your page are laid out with the display attribute

Learn the expansive options of this fundamental CSS property

When it comes to web design, there’s nothing quite so crucial to bringing a page from mockup to an interactive website than the display property in CSS. As the name suggests, this fundamental attribute determines how any given element on the page is shown. Don’t be fooled: there are many more options than simply “show” or “don’t show”! Web browsers are capable of creating the basis for complex displays of content with just one single line of the CSS display property. Learn more about the most common attributes, what they do, and how to use them in this blog post.

The default for divs: Block

The default option for the display property of <div> elements is “block.” When this is the set value, the element is given the entire width of the page, so nothing can be next to it. It gets its own block of the page, even if it doesn’t need that much space. Think of it like setting building blocks on top of each other. If you’ve ever seen a web page without any CSS styles, this is why everything is stacked neatly on top of each other, likely with a big empty space on the right hand side of the page.

Setting an element to “block” is especially handy when using margins. If the element has a fixed width that’s not the entire width of the page, then setting both the right and left margins to “auto” will center the element on the page. And setting only the left to “auto” will push it as far to the right as it can go.

Inline-Block and Inline

But what if you do want to display elements next to each other? Thankfully, you’re not restricted to stacking blocks! Set an element to display “inline-block” and it will be displayed in a line with other adjacent elements with the same attribute. You can still set widths and heights, and if there’s not enough room for everything then elements will be pushed down below the first row of elements. But this is a handy tool to easily create columns on your page.

The “inline” value is similar, except height and width values won’t be applied, even if they’re specified. Think of a <span> element inside of a paragraph, and that’s how the “inline” value is treated. It’s not even its own block in a row, it’s just an inherent part of the row with no independence.

Flex and Grid

While the inline-block value is handy, it doesn’t offer a lot of inherent flexibility. Imagine you have three different columns of different sizes, but you want to display them in a uniform matter. With inline-block, you’ll have to manually adjust the styles of each of the elements until you reach the exact dimensions and paddings necessary to achieve the same look. This may not be a big deal with only two or three columns, but imagine you have a row of ten partner logos of all different sizes. It starts to get unreasonable.

Thankfully, there are options available! Both display “flex” and display “grid” open up a myriad of additional sub-attributes that allow you to set a consistent look for inconsistent elements with short, standardized code. You can even set them up to be “inline-flex” or “inline-grid”, like inline-block from above. Both work slightly differently and have different sub-attributes, which we’ll cover in more in a future post. But if you want to learn more right away, CSS-Tricks has comprehensive guides to both flexboxes and grids.

Table, and its component parts

For a less flexible option, but one that takes care of all the calculations for you, you can set an element to display as a “table”. Naturally, the <table> element has this as its default display attribute, and there are numerous display options (table-cell, table-row, table-header-group, and more) that apply to each sub-element of a table.

All elements in a table-row will be smushed inside. All cells will have an equal height. Everything grouped is stuck grouped. While you can somewhat fight against the automatic calculations of display: table, it’s often simpler to work within the established display parameters. You can achieve something table-like using “grid” especially, so our recommendation is to let tables be tables.

Display: None

There are a few other fringe cases of the display value, but the last big one is setting an element to display: “none”. This is most handy for responsive design: a desktop page may want to have lots of extra elements to entice the users. But smaller devices have less real estate, and may need to be cleaner and to the point. In conjunction with media queries, you can set elements to not display at all in certain situations so you get the best of both worlds. The possibilities expand with hover effects, animations, and jQuery toggles. Making elements appear and disappear, when done correctly, be an engaging and interactive experience for the user.

Preview: make an element fixed or “sticky”

We’ll have another post coming up regarding “position”, another crucially fundamental CSS attribute that controls where an item appears on the page. One such option here is a position: fixed, with in conjunction with positioning attributes like “top” and “left” can empower you to have an element “stick” on the page no matter where the user scrolls. This is how effects like scrolling menus and “back to top” buttons are created. But that’s a topic for another day.

Need help crafting the perfect CSS for your website? Don’t hesitate to reach out to us at Mr. WPress for a free quote today!