Question 1

What is the difference between padding and margin in CSS?

Accepted Answer

Padding is the space inside an element, between its content and its border. Margin is the space outside an element, between its border and neighboring elements. Padding adds to the element's total size (unless box-sizing: border-box is set), while margin pushes other elements away.

Question 2

What is the CSS shorthand order for padding and margin?

Accepted Answer

The shorthand follows a clockwise order starting from the top: top, right, bottom, left. With one value all sides are equal; two values are vertical, horizontal; three values are top, horizontal, bottom; four values are top, right, bottom, left. For example: margin: 10px 20px 10px 20px;

Question 3

Should I use px, rem, em or % for spacing?

Accepted Answer

Use rem for spacing that should scale consistently with the root font size (most layout spacing). Use em for spacing relative to the element's own font size (component-internal spacing). Use px for fixed sizes like borders. Use % for fluid layouts where spacing depends on the parent's size.

Question 4

How do negative margins work?

Accepted Answer

Negative margins pull an element or its neighbors closer, overlapping content. They are useful for fine-tuning layouts, pulling elements outside their container, or creating overlapping effects. Use them carefully because they can cause overflow or overlap unintended content.

🎛️

📦

📋