menu

Padding & spacing

Most elements in your website will have the appropriate spacing built into the styles by default. In some cases, you might want to adjust the spacing a little. The following classes allow you to do this.

Removing space

  • nopad classes set both margin and padding to 0:
    • nopadtop – sets space to 0 on the top of an element
    • nopadbottom – sets space to 0 on the bottom of an element
    • nopad – sets all space around an element to 0
  • nomargin classes set margins only to 0:
    • nomargintop – sets margin to 0 at the top of an element
    • nomarginbottom – sets margin to 0 at the bottom of an element
    • nomargin – sets all margins around an element to 0
  • squish – reduces the line height within the element

Grid spacing

When laying out your content in line with the ANU grid, you can change the space on the top and bottom of a container, but you should not change the space on either side of containers.

Changing the spacing either side will break the grid layout and your pages will not line up properly with the site framework.

Adding space

Space will only be added if the element doesn't have any by default. For example, class="narrow" already includes 20px margin all around, so adding margintop to this will not increase the space.

  • pad classes set the margin to 0 and add relevant padding:
    • padtop – adds 10px space to the top of an element
    • padright – adds 20px space to the right of an element
    • padleft – adds 20px space to the left on an element
    • padbottom – adds 10px space to the bottom of an element
  • margin classes set relevant margins:
    • margintop – sets 20px space to the top
    • marginbottom – sets 20px to the bottom
    • marginleft – sets 20px space to the left
    • marginright – sets 20px space to the right
    • marginall – sets 20px margin on all sides
  • extraspace - specific to lists, increases the spacing between list items. See lists for more information.

Applying classes

Spacing classes can be applied as class="style" to any element. When there is already a class present, use a space before adding the next one. Some examples:

<div class="narrow nopadtop">

<p class="marginleft">

<h1 class="text-college nopadbottom">

<div class="box-solid squish">
 
'Pad' classes will not work on floating elements such as class="left". Instead use marginleft or marginright.

Example

Putting two columns on top of each other results in 40px space in between. In most designs this is fine, in some this is too much space.

You can reduce the amount of space by adding nopadbottom to the first column <div class="narrow nopadbottom">, or nopadtop to the second column <div class="narrow nopadtop">

Updated:  18 August 2017/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle