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.