-2

If I'm just trying to create spacing between two elements, should I rather use 'padding' or 'margin'? Is either way fine should I prefer one way?

dmuensterer
  • 1,715
  • 6
  • 21
  • Depends on the situation. We need a [mcve] for that to determine. – Soolie Nov 06 '17 at 15:14
  • 1
    Possible duplicate of [When to use margin vs padding in CSS](https://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css) – YakovL Apr 07 '18 at 16:30

3 Answers3

1

Padding = distance between content and border Margin = distance between border and the edge of parent element's border (if the parent element has no padding)

Check the CSS box-sizing property: Box-sizing CSS

Border-box contains the padding, but not the margin.

I say use margin for placing the element, and use padding if you want to put the border farther from the border.

You should also check this link out as it will help you understand the layout of your html page better: Box-Model

Animesh Saraswat
  • 93
  • 5
Saphyra
  • 420
  • 2
  • 12
1

In case you are just asking with respect to responsiveness then I would say, "IT DOESN'T MAKES A DIFFERENCE".

Responsiveness is independent of the style type but it does depends on 'PIXEL' and 'PERCENTAGE', if you have your margin or padding in percentage and you have a media query to redefine it in mobile and Tab screens then congratulations your screen is responsive.

Major difference between padding and margin is that, the margins when kept adjacent collapse where as padding don't. For ex. keep 2 div's with margin of 10 px each, you'll see that the total space both have between them is just 10px, this is because the margins when collided collapse where as when you'll do the same with the padding thing, there will be a 20px space between the div's.

Animesh Saraswat
  • 93
  • 5
1

That's depend what the effect you want. The result isn't the same.

margin it's for the outside your HTML element

padding it's for the inside your HTML element

To have a better view of the effect, add a visible background-color to your element.

But you can refer to this picture:

enter image description here

To comeback to your question, for responsive design it's not important. It's all about media queries and screen breakpoints

You read this documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

mickaelw
  • 1,262
  • 2
  • 9
  • 24