CSS: Spacing of elements

You can also use CSS code to reduce or increase the spacing of elements. You can do that by using the padding and margin CSS commands.

Background information about CSS box model

In order to understand the margin and padding CSS commands you should understand the CSS box model, which is the foundation of CSS layouts.

Source: Matt Ryall ( mattryall.net/blog/2008/08/css-layout-fundamentals-box-model )

Everything in CSS is a rectangular box.

Going from the outside, each box has (optionally):

  • margins that separate it from other boxes
  • borders that can be different colors and styles
  • padding that separates its border from its content
  • content.

Box model diagram
Box model diagram (Rich Hauck)

When people start using CSS, they often assume margins and padding are synonymous. The main difference you quickly discover is that padding inherits the background color but margin doesn’t.

CSS Command:

You can change the margin and padding spacing with following CSS code:

.page-element {
padding: 1em;
margin: 0;
}

You have to replace the .page-element class with the right CSS id or class which you like to have different spacing. You can find out the right CSS id or class by using Firebug.

Examples:

Please note that CSS codes are different and depend on the theme you’re using. Most of the time our themes use the same CSS classes and ids, but different CSS styles for each page element.

Change spacing of header area

#header {
padding: 3em;
}

Change spacing of navigation menu items

#mainnav-menu a {
padding: 1.2em;
}

Change spacing between widgets

.widget {
margin-bottom: 1em;
}

 


In case you need any help with CSS customizations, we can highly recommend these WordPress Customization Experts.