Asked  7 Months ago    Answers:  5   Viewed   95 times

When writing CSS, is there a particular rule or guideline that should be used in deciding when to use margin and when to use padding?

 Answers

89

TL;DR: By default I use margin everywhere, except when I have a border or background and want to increase the space inside that visible box.

To me, the biggest difference between padding and margin is that vertical margins auto-collapse, and padding doesn't.

Consider two elements one above the other each with padding of 1em. This padding is considered to be part of the element and is always preserved.

So you will end up with the content of the first element, followed by the padding of the first element, followed by the padding of the second, followed by the content of the second element.

Thus the content of the two elements will end up being 2em apart.

Now replace that padding with 1em margin. Margins are considered to be outside of the element, and margins of adjacent items will overlap.

So in this example, you will end up with the content of the first element followed by 1em of combined margin followed by the content of the second element. So the content of the two elements is only 1em apart.

This can be really useful when you know that you want to say 1em of spacing around an element, regardless of what element it is next to.

The other two big differences are that padding is included in the click region and background color/image, but not the margin.

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }
<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>
Tuesday, June 1, 2021
 
kwichz
answered 7 Months ago
82

Proper uses of IMG

  1. Use IMG if you intend to have people print your page and you want the image to be included by default. —JayTee
  2. Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.

Pragmatic uses of IMG

  1. Use IMG plus alt attribute if the image is part of the content such as a logo or diagram or person (real person, not stock photo people). —sanchothefat
  2. Use IMG if you rely on browser scaling to render an image in proportion to text size.
  3. Use IMG for multiple overlay images in IE6.
  4. Use IMG with a z-index in order to stretch a background image to fill its entire window.
    Note, this is no longer true with CSS3 background-size; see #6 below.
  5. Using img instead of background-image can dramatically improve performance of animations over a background.

When to use CSS background-image

  1. Use CSS background images if the image is not part of the content. —sanchothefat
  2. Use CSS background images when doing image-replacement of text eg. paragraphs/headers. —sanchothefat
  3. Use background-image if you intend to have people print your page and you do not want the image to be included by default. —JayTee
  4. Use background-image if you need to improve download times, as with CSS sprites.
  5. Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.
  6. Use background-image with background-size:cover in order to stretch a background image to fill its entire window.
Tuesday, June 1, 2021
 
erotsppa
answered 7 Months ago
79

This is the real life scenario

Imagine this scenario

  1. You have a global CSS file that sets visual aspects of your site globally.
  2. You (or others) use inline styles on elements themselves which is usually very bad practice.

In this case you could set certain styles in your global CSS file as important, thus overriding inline styles set directly on elements.

Actual real world example?

This kind of scenario usually happens when you don't have total control over your HTML. Think of solutions in SharePoint for instance. You'd like your part to be globally defined (styled), but some inline styles you can't control are present. !important makes such situations easier to deal with.

Other real life scenarios would also include some badly written jQuery plugins that also use inline styles...

I suppose you got the idea by now and can come up with some others as well.

When do you decide to use !important?

I suggest you don't use !important unless you can't do it any other way. Whenever it's possible to avoid it, avoid it. Using lots of !important styles will make maintenance a bit harder, because you break the natural cascading in your stylesheets.

Friday, June 4, 2021
 
Santi
answered 6 Months ago
57
  1. First of all, it's probably 4px and not 4. Second, that's just the way the browser vendor decided should be the default.
  2. It is saved in the default browser stylesheets.
  3. You can, but you shouldn't. It differs with each browser. Google it! How do I change default stylesheet on <insert browser here>?
  4. There probably are slight differences, you should be able to tell... by looking at the default stylesheets :)

That difference is one of the main reasons we as designers use a CSS reset, to normalize all of the CSS awkwardness that follows different browser implementations.

Tuesday, August 3, 2021
 
timothy5216
answered 4 Months ago
30

The W3C standards dictate that any percentages for paddings and margins are a percentage of the element's width, not height:

The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

However, the top and bottom positions are determined by the container height, though ;) There is no single CSS-only way to do it, but if you are willing to throw in some JS, that's entirely possible.

Some solutions that I can think of (non-exhaustive list):

  1. Displacement from top by 50% (CSS only), and then offset by negative top margin that is half of the element's own height (JS-based calculation)

  2. Calculate top and bottom paddings/margins by JS after determining container height

Friday, August 20, 2021
 
VitaCoco
answered 4 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share