Web development tutorial

The difference between margins and padding

Tutorial created by Ray Borduin, WebAssist

Categories: CSS

rating

So you are in the process of learning CSS and you have come across two fundamental CSS properties for keeping space between box elements, CSS margins and CSS padding. They sound like they accomplish the exact same thing so what’s the difference? Are they interchangeable? Should you use one or the other?

At WebAssist we have a large community learning CSS from the ground up. So naturally we get a variety of questions regarding basic CSS properties. In an effort to clarify let’s take a quick look at the difference between the two.

While both CSS properties do offer the ability to add space within a CSS layout there is a definitive separation between the two. To better understand we can use the CSS Box Model and determine the main difference.

As you can see in the above diagram the center is where your element, such as your text, would reside. The space directly around your text element is your CSS padding, followed by the border and then your margin. Therefore, padding defines the spacing between your element and the boarder, while the margin defines the spacing between your border and any other outer elements in your CSS layout.

Here is an example that should help further clarify:

As you can see the margin defines the space outside your border and between other elements, while the padding defines the space between your element and the elements border. Hopefully by understanding the difference you can more effectively utilize your CSS margin and CSS padding properties.

arrow downInteractive box model

Here’s a pretty cool interactive CSS box model resource which can help even further conceptualize the difference:
http://redmelon.net/tstme/box_model/

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating

rod431909: 1 Year, 2 Weeks, 5 Days, 22 Hours, 34 Minutes ago

The references to the "above diagram" in paragraph 4 and "Here is an example" in paragraph 5 need to have actual diagrams to reference. Don't see them here.

Jared Lui: 1 Year, 1 Week, 1 Day, 2 Hours, 30 Minutes ago

Yeah, great start Ray but I think the meat and potatoes slid off the plate...

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.