Margin and Padding (CSS)
First, lets describe what margin and padding are. Margin refers the space that needs to be between different elements in the page. Padding refers to the space between the former size of the block that contains it and the content itself.
Margin is a distance from one package to another. In other words, it’s an interblock space. Padding refers to a shift from content to rim package.
Both have four properties that can be set, those refer to each side of the element: top, bottom, left and right. Each one can be set separately or together.
You can also use any measurement unit you want (relative or absolute) to specify them.
| |
You can specify one, two, three or the four values inside the same padding or margin property.
If you set four, each one corresponds to one property, (top, right, bottom, left).
If you set three one is for top one for bottom and the last for left and right, (top, left and right, bottom)
If you set two one is for top and bottom and the other is for left and right. (top and bottom, right and left)
If you set one it will be applied all properties.
Now, lets define when you use each one.
Margin should be used when you want to center an element or when you want to make some content stand out putting it away from other elements.
Padding should be used when you need some space between the content and the container, when you need to add some animation or depth to the content or when you want to increase the size of an element, since it will automatically increase the size.
I failed a question on setting different values for two sides in the same line, you don’t need commas or any other separator when setting multiple values, the right syntax for this question is: property: value value;
I failed a question on the order of which elements are specified when the four properties are present. The order is CLOCKWISE starting from top right syntax is: property: top, right, bottom, left;