Search code examples
csspaddingmargin

Using Margin vs Padding?

I've recently started learning Wed Development online by myself and new to this area, so apologies for my basic query. I know the difference between Margin and Padding (in a logical term) but not so sure 'when we should use Margin and Padding'... On a lesson, a lecturer used "Margin" to give some space between "Tick Icon" and "Easy to Use" text (see below images), but can padding be used here as well? If not, what might cause an issue if I use padding for this?

Also, she used "rem" for margin and "%" for padding. What are the difference between using rem and % (and px)?

Thank you very much for your help on this.

enter image description here

enter image description here

Solution

  • 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.