Can CSS margin be avoided altogether in favor of padding?

Question

As I am sensitive to sensory overloads and get confused with too many visual details, I would like to simplify my palette of CSS features to a managable toolkit but without really compromising too much of the aesthetic appeal. In light of that, I seem to be hopelessly lost balancing between margin and padding of my HTML elements.

So I am contemplating to stop using margin altogether in favor of padding. To me, who is not a visual/HTML expert by any means (I am more of a backend programmer by experience), it seems doable, however, I am sure there is a reason the distinction exists.

By this post, I am asking gurus to please explain the cons of using and not using both margin and padding and whether reasonably elegant design can be accomplished by using only one of the two. It would also be great if someone could submit examples to illustrate something that can be accomplished with one and not the other.

I would say if there isn't a background color, and it isn't a link, there isn't much difference between margin and padding — Cody Guldner, Mar 23 '13 at 17:09
thanks, Cody, some examples in js fiddle would be great, if you can think of any — amphibient, Mar 23 '13 at 17:10
Is this related? http://stackoverflow.com/questions/13549490/padding-vs-children-with-margins — BoltClock, Mar 23 '13 at 17:12

score 2 · Answer 1 · edited May 23 '17 at 11:49

No not in every aspect.

Margin and padding are two completely different things. Padding will add to the overall size of the objects width or height whereas margin will not.

Imagine you have a set of links that are floated left. Just using padding on the links will cause the anchor element to be very big and quite possibly not what you would want. Whereas using a little padding and also a margin to increase the space between the anchors would be more suited.

Using margin ensures that something is so far from something else.

Using padding ensures that the content of something is so far from its own edge.

If you had a layout of boxes on a page and you wanted to have spacing between each box and also a border, using padding alone would not suffice so you would have to use margin as well.

As a general rule use each when it is needed. I know what you mean about things getting messy in your css but there are ways to simplify things. For a simple site I have done the following before.

css

.leftMargin {margin-left: 10px;}
.rightMargin {margin-right: 10px;}
.topMargin {margin-top: 10px;}
.bottomMargin {margin-bottom: 10px;}
.leftPadding {padding-left: 10px;}
.rightPadding {padding-right: 10px;}
.topPadding {padding-top: 10px;}
.bottomPadding {padding-bottom: 10px;}

Then you can easily set universal padding and margin rules without too much bother. But then again you could argue that this creates unmanageable html markup.

It is really something that you have to work out for yourself. Something to consider though is using only margins can have very undesirable affects! More to the point of collapsing margins Why does this CSS margin-top style not work?.

Hope this helped.

I use chrome's developer console rather than firebug. I find it better and easier to navigate. — GriffLab, Mar 23 '13 at 17:49

score 1 · Answer 2 · answered Mar 23 '13 at 17:24

Well I would say that you cannot avoid using margin and that they have different uses.

Padding should be used to create space between the edge of your element and the content whereas Margin should be used to separate elements.

If you never use borders then arguably you could do away with 1 of them but if for instance you have 2 divs next to each other, both with borders but you don't want them touching, how do you plan on separating them? It is possible to position them but often margins are the best way.

Also consider that the total element width is width + padding whereas you could argue the margin size is 'outside' the element although still technically part of it.

I have a lot of style markup and use padding and margin equally

Carles Andres · Answer 3 · 2013-03-23T17:49:19.797

The simplest example I could make, to show you the differences between both concepts is this one.

Notice that margin is the space between the border (red color) and the surroundings, while padding is the space between the contents (in the example is the text) and the border.

Usually you will need to use both of them. However in the few cases when you don't need to use a border at all, you can manage pretty well by just setting one of them.

score 0 · Answer 4 · answered Mar 23 '13 at 17:57

No, not if you want to do complex designs

The holy grail of web design uses a combination of margin and padding

Even though margin and padding can at times do similar things, the purpose of each is different.

margin refers to the space required on the side of an element relative to other elements
padding refers to space between the content of the element and its border

The power having margin and padding is realized when you use both together.

Can CSS margin be avoided altogether in favor of padding?

4 Answers4