Video:Differences Between Padding and Margins

Transcript:Differences Between Padding and Margins

Hi, this is Dimitri LaBarge for About.com, and today we're going to talk about the differences between padding and margins.

Basic Differences Between Padding and Margins

The concepts of padding and margins can be confusing and seem redundant. Let’s take a minute to clarify, and explain when to use each function. Let’s start with padding. Padding is a space that goes directly around an individual element in a design. Let’s say you’re putting an image. If you use a padding command, you’re putting space right in the border of that image, and usually around all sides of that image.

Padding vs Margins

Another example of padding is using it in a table element. In these individual cells, a padding command increases the space between the content and the table cells. This usually results in making the table or text block bigger.Margins, on the other hand, aren’t designed to be used within individual elements. Margins are designed to create spacing between blocks of text, or blocks of individual elements. For instance, if you had two tables side by side, you would define a margin to separate those tables.

Also, margins would be used to create a fixed space for page content, just like in print layouts. This usually is done with CSS, or Cascading Style Sheets. You can control all your margins for a very precise result: right, left, top and bottom margins are all individually definable.

Box Model in HTML

Now, because of the vagaries on how browsers implement what’s called the "box model" in HTML, there might be times that you want to use one over the other. Internet Explorer 6 has a bug when rendering certain margins, so you might want to hack around that by using padding.

Thanks for watching. To learn more, visit us on the web at About.com.