Space is an important aspect of creating balanced and harmonious layouts in web design. As a designer, it’s important to understand how space can enhance as well as hurt your designs.
Whitespace, or negative space, refers to the emptiness between elements. It’s not necessarily white in color, even though, that is sometimes the case.
For example, you will notice that Google embraces whitespace on its landing page. It focuses the user’s attention solely on the primary action, which is searching for content.
Too much whitespace can negatively impact the flow of your site. By including too much spacing in-between elements, it can cause issues for users trying to navigate seamlessly through the content.
As a designer, don’t fear using space to enhance the usability of your site and prioritize the most important content.
Instructions
Our site is starting to come together. But it is a little tight. Let’s add some white space to different parts of the site’s interface. One way to add some nice space between elements on a page is by applying the property of padding to elements.
Remember, padding is the space inside of an element, while margin is the space around the element.
In the styles.css file, find the CSS selector .site-main
and update the padding
property values from 0 15px
to 60px 15px
.
This selector can be found in section 6, Page Styles.
In the styles.css file, find the CSS selector .site-main-header
and update the margin-bottom
property values from 0
to 60px
.
This selector can be found in section 6, Page Styles.
In the styles.css file, find the CSS selector .location-details li
and update the margin-top
property values from 0
to 15px
.
This selector can be found in section 6, Page Styles.
In the styles.css file, find the CSS selector group
css
.site-nav-left li:not(:last-child),
.site-nav-right li:not(:last-child),
.site-nav-mobile li:not(:last-child) {}
and update the margin-right
property values from 5px
to 45px
.
This selector can be found in section 4, Modules Styles.