January 30 2016

Padding vs Margin a CSS problem

I want to talk about an issue I have had with CSS Padding and Margins.

When I began developing websites, tables were used to separate section and space out areas of the page, this worked as expected on all browsers.

But unfortunately this caused issues with updating the site, and modification of the design. Both of these were time consuming and caused confusing code.

In steps CSS, with which to separate the code and the layout.

My main problem I have with CSS is its unique way it deals with Padding and Margin, both of these play havoc on the design if used on two different objects.

My own thoughts on padding and margins are thus:

  1. Margin effects the outside of an element and will effect any other element close to it.
  2. Padding effects the inside of an element but will not effect elements out side it.

Here is the base element I will be using for the article.

/assets/images/blog/elements_41/base_element.jpg
Base Element. no padding or margin

The element is 100px (pixels) high with no padding or margin (the height is not fixed, its just a representation).

Lets add 20px margin to the element;

/assets/images/blog/elements_41/elementmargin.jpg
20px margin

All looks good, and works as expected, adding a margin increases the height of the element.

Lets add a 20px padding, this, to my mind, should not alter the height of the element like so;

/assets/images/blog/elements_41/elementmarginpadding.jpg
20px to both margin and padding, proposed

However, the reality is, adding padding does interfere with the element;

/assets/images/blog/elements_41/elementmarginpaddingreal.jpg
20px to both margin and padding, reality

If the element has a fixed height then this should be true.

My reasoning is that if padding effects the overall size of the element, then why do we have two different styles to use? Cant we just use margin only?

Now that said the only notable difference between margin and padding, is in the background. Whether that's a image or just a color. Margin will move the background, while padding will move the internals of the element.

COMMENTS

WHAT OTHERS HAVE TO SAY

Be the first to comment

LOGIN

Please Login here to comment, or Signup today!

POPULAR POSTS

SOMETHING YOU MAY FIND INTERESTING