Margin Border and Padding

What do they mean?

• Border
  First of all let us get the easy one out of the way, the border is a decorative wrapping or outline to separate an element from whatever is outside the element.




• Margin
  One thing i learnt is that margins add space between things. You could use margins to add space between an image and a paragraph or even add space between two images.




• Padding
  Padding on the other hand is used when you want to add space between the element and the border of the element. An element will have a border up against it by default and padding will push the border out.

I have noticed that in my findings i came across “the box model”. It says that all websites are made up of a series of boxes and they have four major components

• Content :The element in the inside part of the box.

• Padding :The inner space between the element, and the border of your box.

• Border :The perimeter of the box. Borders can be invisible or they could be a thick colored line like the green one pictured above.

• Margin :outer space (or lack of space) surrounding the box.

You can align CSS boxes vertically or horizontally. You can place them side-by-side, nest them inside one another, or even overlap them.

Here is an image to help you

click image to see a quick youtube tutorial

Differences

The margin affects the outside space and does not affect the background of the element.
While padding Affects inside space, increases element box size, extends background or color behind the content.
Padding can be set to zero pixels or above, you can change the element's size and affect things like color fill or the background's visibility within the box.
Margins are invisible barriers set around a box and they are what define how your element interacts with its surroundings. Margins can be set to zero and above and you can also set margins to auto and even negative values.

Properties

There are various margins that you can apply to your content: margin - the margin property can be used when you want all your sides to be equally measured. E.g. 20px top, right, bottom If you want one side to be a different margin than the others then you will need to define each one .

Both margins and padding are effective ways to space out your content in Canvas. Sometimes various content just needs a little room to breathe, and simple CSS can remedy the look and feel of your pages and assignments.