What they are & where to use them.
White space – whether it is truly white or not – is a necessary part of the design of your website. That space around your content makes it clear to the visitor what things belong together, reduces the cluttered feel, and makes the overall site more readable.
The grid layout area of the Headway visual editor allows you to layout your design with extra columns or wider gutters to increase this white space. But sometimes, within a block, you need more white space. Perhaps your text is too close to the edge of the block or the space between images and text is too narrow.
You can create this extra space using custom CSS. You have several CSS properties to choose from that will create white space. The most common I have seen used are margin, padding, and border. Often, these properties are not being used properly and the designer struggles to get the layout they really want.
On the surface, margins and padding seem to do the same thing. In fact, I’ve seen people use borders in an attempt to increase white space around their content. Margins and padding, however, are very different and understanding them will help you to know which is appropriate.
CSS is a BOX Model
Everything in CSS is a rectangular box. Everything in the box is built like layers of an onion. Inside this box are the content, padding and borders. Margins are not a part of the box.
- Content is at the center of the box
- Padding surrounds the content
- Borders surround the content and padding
- Margins create space outside of the borders.
Content, of course, is either text, images, widgets or the like.
Padding lies inside the box, surrounds the content, and is used to move the content away from the edge of the content box. As you add more padding on the sides, the text will wrap so that the paragraphs are narrower. If you have an image as your content, the image will move away from the edges. If the image plus the padding is wider than the box, some of the image will be cut off.
Borders are generally assigned a color, thickness, and style and are used to ‘frame’ the content. Borders also add to the overall width of the box. If your box is a fixed width and your image is larger than the box minus the border, some of the image or border or both will get cut off.
Margins will be transparent. I’ve shown them in a light grey to make the margins stand out, but if this were a real webpage, the margin would be invisible.
Margins lie outside of the box. They don’t count in overall box size. They work by clearing space around the box.
If you have 2 boxes placed side by side and the box plus margins for both is wider than the space available, one of the boxes will be located below the other. If your site is 960px wide and you have 3 boxes (we’ll use 3 images as an example) that are 300px wide and you add a 5px border and 30px margins, this would require 1010px of space, (300 + 2×5 + 2×30) x 3. This would force the 3rd box to drop below the first 2.
How to use padding
Padding provides space between the edge of the box and the content. By adjusting padding, you can push paragraph text in by a few pixels while leaving the Headings closer to the edge. You can add top or bottom padding to increase the vertical space between paragraphs or around images. This provides some much needed space in your website. Padding should not be used to move the content box.
How to use borders
Borders should never be used as padding. I’ve seen several designers do this, but borders are meant to create a visual frame around content. Use a border to frame images or as a horizontal line between posts.
How to use margins
Margins should never be used as padding. Use margins to move the box relative to the other boxes on the page.
CSS of margins and padding are declared in pixels starting at the top and working clockwise around the box. Think of this as starting at midnight and working around the clock to noon. Top, right, bottom, and left.
margin: 1px 2px 3px 4px;
The CSS above would create a 1 pixel top margin, 2 pixel right margin, 3 pixel bottom margin and 4 pixel left margin. And below, you will see the code for the same amounts but for padding.
padding: 1px 2px 3px 4px;
Margins create space for the box by interacting with other boxes on the page. Borders create a frame around the box. Padding moves the content away from the edge of the space. By knowing when and where to use each of these, you’ll be able to create the look you want.