Are padding and margin interchangeable?

Question

Can I use padding instead of margin to position an element?

Answer

Not always, even though they might seem to render similar results separating elements from one another, their main difference is that margin will create the space outside of the element, while padding constricts space inwards.

Here’s a visual example where the first element (red border) has received a padding property of 50px and the second (blue border) a margin property of 50px.


The space they occupy is the same, but the way it is occupied is different and that might make a difference in how your element is displayed.

20 Likes

Thanks for the info.

1 Like

The padding is set, and there is text in the content box, and border is set.
If the height of the entire box is lessened, but padding is not changed, what happens to the text inside the box?

3 Likes

If the padding is set less than border nothing will happend to the text beacuse padding is the space between content and the border it will adjust itself

e.g see if padding is 200px
and border is 100px
the 200px of padding is inside the border of 100px
means it is 200px of 100px

1 Like

If i set padding 200px what will the distribution among the
padding-top padding-left padding-bottom and padding-right
means it may be 50px or what

padding is used to separate content from the border right? then in the case of no border applied? what is the size of the default solid border?

1 Like

can we use padding and border for images?
like if i want the corners of the image to be rounded how do i apply this?

1 Like

I’m a newbie still, so I will happily be corrected by someone more experienced but… I believe in the case of borders the default size is to wrap the element entirely so it will form to the width/height of the content area.

If you were meaning what size is the border if we don’t specify a width?

If I recall from the lesson, a border’s default specs overall are:
width = medium
style = none
color = [element color]

So I believe:

p {border: solid}

would be the same as:

p {border: medium solid}

and in either case in your style.css it would have the browser render a solid medium border that is the color of the paragraph element.

With regard to the question about rounded pictures:

.avatar {
  background-image: url("./Resources/Image/avatar.jpg");
  background-size: cover;
  height: 50px;
  width: 50px;
  border-radius: 50%;
}

would make a circular avatar image similar to how our images show up in forum posts. I believe you can also set the border-radius to lower/higher percentages or adjust to pixels (px) to alter the rounded effect.

5 Likes

Thank you!! this really helped me alot

1 Like

Anytime! I’m just glad I made sense to someone else! :laughing:

2 Likes

If the width, style or color of a border were not explicitly defined, the browser will assign these properties default values. Codecademy did say that borders have deault values of medium none <element's color>, however, if you use your browser’s dev tools to check an element’s box model, you will see that borders have a default width of 0px, a style of none (which will make the border invisible to the user) and a color of the element’s color property

This means that if we did not explicitly define an element’s border’s style, it would be set to none (which will make it invisible) and if we didn’t explicitly define an element’s border’s width, it would be set to 0 (which will make it non-existent)

1 Like

Which browser applies those default properties and is it different for each browser?

Browsers have different user agent style sheets. However, they are all very similar. Most browsers apply the same default styles that I mentioned above

1 Like

Oh okay thanksssssssssss

Any other visual example?

Hi,
Can we use for padding percentages?

TL;DR Looks like you can! But it looks more complex than you might expect.

According to the Mozilla web documentation for the padding property, the percentage value is in relation to the inline size (aka the width, unless its text that’s oriented sideways with writing-mode) of the containing block, NOT the block you’re setting the padding of. Figuring out exactly what the containing block is, as well as its width, is contextual and looks rather involved on its own.

I assume using percentage for the padding would be good for more responsive design. If someone can correct me on anything or expand further on the uses of percentage values with padding, that’d be awesome!

If you have still got questions left, check this article out Padding vs Margin: The Definitive Guide – UX Engineer.

3 Likes

Sweet! Thanks for the information. :slightly_smiling_face: