Padding shorthand in CSS:
- Four values: starts at the top, then right side, bottom, then left side.
- Three values: first number is top, second number is right and left, third number is bottom.
- Two values: first number is the value for the top and bottom padding, and the second value will be for the left and right sides.
padding: 20px 40px;
- One value, it will be the same on all four sides.
Many developers when they begin a new project always reset the universal selector to 0. That way they can design their website how they want, without the browser defaults. Like so:
* {
margin: 0;
padding: 0;
}
Helpful hint:
Use margin-bottom or margin-top to put extra space between elements. Use one or the other (either bottom or top every time you create a site), but not both, so you can have better control over your design.
Collapsing margins – happens when a margin is given below an element, and a margin is given above an element which are next to each other. The margin is collapsed to the biggest margin given between them, not adding the two margins together. For example, if the top element has a bottom margin of 20 pixels, and the lower element has a top margin of 40 pixels, there will only be 40 pixels between the two elements.