When to Use Margin VS Padding in Css

When to use margin vs padding in CSS

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>

In css when to use padding and when to use margin

This image can help you understand better.

enter image description here

Using Margin vs Padding?

Margin is the space around elements.

Padding is the space around the elements contents.

So margin is outside the element.

Padding is inside.

You can use margin when you are placing elements near each other

You can use padding when you are changing how a element interacts with other elements.
(not a good explanation)

Also pixel is the pixels on the screen.
Rem is "Relative to font-size of the root element" (w3schools) https://www.w3schools.com/cssref/css_units.asp

Hope this helps.

What is difference between CSS margin and padding?

In short padding make "space" inside your box, and margin do this outside of your box.

This picture explain it pretty good :)

enter image description here

Margin or padding what is recommended?

One important difference (asides from margin means outside and padding means inside): Margins of adjacent elements overlap, when paddings don't. Take this example:

<p>Lorem ipsum</p>
<p>Dolor sic amet</p>

If you use margin:

p { margin: 10px 0; }

The space between these 2 paragraphs will be 10px.

But if you go:

p { padding: 10px 0; }

The contents will be 20px separated.

Should I use margin or padding when formatting a text?

line-height is used to control the spacing between lines of a paragraph. Margin is used between elements containing only text, generally. This isn't much different than standard typography used in print.

So you set the line height for a heading and then control how much space you want underneath it with margin. Just as you would for any other component. The space between paragraphs is margin. However, the space between individual lines of a paragraph are controlled with line height.

All of this can also be used to set a vertical rhythm on a page. You should Google for that.

One good reference for this is The Elements of Typographic Style Applied to the Web

I know the difference between padding and margin but when should you use each one?

I think Itay Moav answers from this question provides a good check list on what conditions you would like to use margin, and on what conditions you would like to use padding. Let me copy-paste it here:

  1. You have some kind of background properties. Margins won't get them.
  2. You have a border
  3. You use TD (no margins)
  4. Two nested items, The margins are collapsed together, where paddings not. (need to check this one)
  5. They probably affect the width and height of the element differently. (If some one knows better, pls edit this).

Use padding or margin for positioning text in css?

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

margin/Padding or Position , which one is best for the responsive design?

Position is not better for responsive design. It is useful but not recommended to use in place of margin/padding.

For example when you use position:absolute; on an element it takes that element out of normal content flow and adjusts its position only according to it's relative positioned parent element. If you use it too often, it is gonna create problems for you.

And responsive design is about using float

In short position is not to be substituted formargin/padding.



Related Topics



Leave a reply



Submit