Margins, Padding & Borders

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.

CSS box model using content, padding, borders and margins

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;

Summary

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.

 

Spread the word!

20 Responses

  1. Hi Kelli

    Takes me back a bit – trying to get my head around the CSS box model and using IE hacks.

    Nice clear explanation, good info on when to use what and a short but useful summary.

  2. Other than a bottom margin for blocks, and for the overall wrapper, why don’t all blocks and elements of Headway 3 have padding and margin settings? This would seem to be a given, but instead, it’s a matter for custom CSS.

    • @ThomasForrester

      Hey Thomas,

      We are planning on adding it and would’ve added it at the beginning, but we’re making preparations for integrating it and still working out the most rock solid and intuitive way to make it work ;-).

      So, to clarify, this is a feature that’s in our todo list and we are going to add it.

      •  @claygriffiths 
        I just bought Headway today and was kind of thrown off that margin and padding settings weren’t built into the visual editor for every element.  I guess I just assumed that’s how it would be. I’m transitioning from Squarespace  – look at Squarespace – they have it built into every element and container in their editor – it makes creating their layouts very fast and precise without having to use custom css.  This is a major and most desired feature for me. This is what “drag and drop” is all about for me – having that control of where the pieces are being dragged on the page. I really had no idea this was not part of your system. Do you have a rough estimate of when this is coming?
        Thanks.
         

        •  @akleid I completely understand.
           
          I can’t provide an ETA since we’re currently focusing on getting the child theme selection live, but I can assure you that this is high priority on our list ;-).

  3. Morning Clay, This is one your dad should remember. in the Saturday morning cartoons there was this old guy and when he did something cool, it was said of him (& this is for all of you at Headway, “Old MaGoo, you’ve done it again!!!

  4. Where is the tutorial to show you how to use padding in context boxes with CSS? It seems like a lot of work for a drag and drop theme? 

  5. This is a great explanation of how it is set up. Yet for newbies like me, it would be great if someone posted:
    to add padding
    1 click A
    2 click B
    3 change the X field to Y

  6. This is a great explanation of how it is set up. Yet for newbies like me, it would be great if someone posted something like below because I still can’t get it to work…
    to add padding
    1 click A
    2 click B
    3 change the X field to Y
     

  7. Hello Clay, everyone,
     
    I’m using Headway 2013.
     
    When I use 3 columns on a page, the right margin on my site is off by one pixel. I even hired somebody on Elance to help me fix this and he can’t figure it out.
     
    ** What is the CSS code needed to extend the width of the 3rd column by a pixel so that it lines up with the header?
     
    There must be a code that allows me to adjust the column width of the 3rd column but I can’t figure out where to put it.
     
    I’ve tried  this on custom.css but it makes no difference:
     
    #container {     border-bottom: 1px solid #ccc!important;     
                               border-right: -10px solid #ccc!important;
                               border-left: 1px solid #ccc!important;
    }
     
    I can even comment out that line and it makes no difference.
     
    There’s another file called “bare-elements.css” but I don’t know where or how to add the code I need.
     
    Any tips would be greatly appreciated.
     
    thanks

  8. When I change the padding it moves my slide deck over too….I don’t want the padding around my slide deck ?? Can this be changed ?

    • Michelle – we’d need to know specifics of how you are changing your padding. For more detailed help, please post a thread in the forum. Thanks!

Leave a reply

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress