Question 1

What is the CSS Box Model?

Accepted Answer

The CSS Box Model describes how every HTML element is a rectangular box with four areas: content (innermost), padding (space around content), border (around padding), and margin (outermost space around the element).

Question 2

What's the difference between margin and padding?

Accepted Answer

Padding creates space inside the element between the content and border. Margin creates space outside the element between its border and neighboring elements. Background color fills padding but not margin.

Question 3

What is box-sizing: border-box?

Accepted Answer

With border-box (Tailwind's default), width and height include padding and border. With content-box (CSS default), they only include content, making sizing calculations harder.

Question 4

How do I use negative margins in Tailwind?

Accepted Answer

Prefix margin classes with a dash: -m-4, -mt-2, -mx-6. Negative margins pull elements in the opposite direction and can create overlapping effects.

Box Model Visualizer

You might also like

Spacing Visualizer

Border Radius Visualizer