- Skip to main content
- Skip to footer

# Proximity - Grid System

## Table of contents

- Overview
- Padding
- Line height
- Margins and gutters

## Overview

White space is an important feature of the grid system — which automatically generates by default. You can overwrite some white space with additional CSS in order to increase or decrease the default settings.

Within a grid system, you can only change the white space above and below a grid cell. You can never change the gutters (white space to the left and right of a grid cell). This is because the grid system design fits perfectly in the content area, and is tied to the user's browser setting. There is no room for extra pixels. Reducing pixels causes the cells to behave in unexpected ways due to their `float: left` property.

## Padding

By default, grid cells do not contain any padding. As a result, all content placed within grid cells must be placed within a list, paragraph, heading, form, image, table or other content element.

No paragraph tag, which leaves the grid cell without padding.
View code

    <div class="span-4 background-light">
    	With paragraph tag - text is easier to read with padding.
    </div>

With paragraph tag - text is easier to read with padding.

View code

    <div class="span-4 background-light">
    	<p>With paragraph tag - text is easier to read with padding.</p>
    </div>

## Line height

The CSS provides several line height options that you can use to override the default size. The sizes range from 1.0 to 2.0.

Line height options
Class | Details | Example
--- | --- | ---
`line-height-xsmall` | Extra small font (0.8) | Resulting height Resulting height
`line-height-small` | Small font (1.0) | Resulting height Resulting height
`line-height-medium` | Medium (1.25) = default size | Resulting height Resulting height
`line-height-large` | Large (1.5) | Resulting height Resulting height
`line-height-xlarge` | Extra large (2.0) | Resulting height Resulting height

## Margins and gutters

The white space to the left and right of a grid cell is called the gutter. The white space above and below a grid cell is the margin. The default `margin` settings of a grid cell are as follows:

- the margin-top is set to zero
- the margin-right and margin-left is 20px.
- the margin-bottom is set to 20px

You can only increase or decrease vertical proximity of content (move up or down). There are a variety of reasons to modify vertical proximity, such as visually connecting related components. In which case, you may need to increase or decrease white space between menu items, or move content closer to or farther from a heading tag. The classes you can use are as follows:

Table 1: Top Margin
Class | Margin | Example
--- | --- | ---
`margin-top-none` | 0px | Lorem ipsum dolar sit amet.
`margin-top-small` | 2px | Lorem ipsum dolar sit amet.
`margin-top-medium` | 10px | Lorem ipsum dolar sit amet.
`margin-top-large` | 20px | Lorem ipsum dolar sit amet.
`margin-top-xlarge` | 50px | Lorem ipsum dolar sit amet.

Table 2: Right Margin
Class | Margin | Example
--- | --- | ---
`margin-right-none` | 0px | Lorem ipsum dolar sit amet.
`margin-right-small` | 2px | Lorem ipsum dolar sit amet.
`margin-right-medium` | 10px | Lorem ipsum dolar sit amet.
`margin-right-large` | 20px | Lorem ipsum dolar sit amet.
`margin-right-xlarge` | 50px | Lorem ipsum dolar sit amet.

Table 3: Bottom Margin
Class | Margin | Example
--- | --- | ---
`margin-bottom-none` | 0px | Lorem ipsum dolar sit amet.
`margin-bottom-small` | 2px | Lorem ipsum dolar sit amet.
`margin-bottom-medium` | 10px | Lorem ipsum dolar sit amet.
`margin-bottom-large` | 20px | Lorem ipsum dolar sit amet.
`margin-bottom-xlarge` | 50px | Lorem ipsum dolar sit amet.

Table 4: Indentation, Left Margin
Class | Margin | Example
--- | --- | ---
`indent-none, margin-left-none` | 0px | Lorem ipsum dolar sit amet.
`indent-small, margin-left-small` | 2px | Lorem ipsum dolar sit amet.
`indent-medium, margin-left-medium` | 10px | Lorem ipsum dolar sit amet.
`indent-large, margin-left-large` | 20px | Lorem ipsum dolar sit amet.
`indent-xlarge, margin-left-xlarge` | 50px | Lorem ipsum dolar sit amet.

## Examples

### Default Margins

Lorem ipsum dolar sit amet.

Lorem ipsum dolar sit amet.

### Using `margin-bottom-small`

Lorem ipsum dolar sit amet.

Lorem ipsum dolar sit amet.

View source

    <div class="span-2">
    	<h3 class="background-dark">Heading</h3>
    	<div class="span-2 background-light margin-bottom-small">
    		<p class="indent-medium">Lorem ipsum dolar sit amet.</p>
    	</div>
    	<div class="span-2 background-light margin-bottom-small">
    		<p class="indent-medium">Lorem ipsum dolar sit amet.</p>
    	</div>
    	<div class="span-2"><img src="http://www.placehold.it/430x200" alt=""></div>
    </div>

## Recap

### Proximity: Padding, Margins and Gutters

- White space is an important feature of the grid system.
- A gutter is the white space to the left and right of a grid cell.
- You can only change the white space above and below a grid cell — not the gutters.
- Grid cells do not have inside padding. The padding is inherent to the paragraph, list or heading.

Date modified:
  2013-04-11