Margin in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the CSS margin property?

The margin property creates space outside an element's border. It pushes other elements away, controlling the distance between elements.

beginner

How do you set different margin sizes for top, right, bottom, and left in CSS?

Use margin-top, margin-right, margin-bottom, and margin-left properties to set each side's margin individually.

beginner

What does margin: 10px 20px; mean?

It sets the top and bottom margins to 10 pixels, and the left and right margins to 20 pixels.

intermediate

What happens if you set margin: auto; on a block element with a fixed width?

The element will center horizontally within its container because the left and right margins automatically adjust equally.

intermediate

Can margin values be negative? What does that do?

Yes, margins can be negative. Negative margins pull the element closer to or even overlap with neighboring elements.

Which CSS property controls the space outside an element's border?

A width

B padding

C border

D margin

Margin controls the space outside the border, while padding controls space inside the border.

What does margin: 5px 10px 15px 20px; set?

A All sides 5px

B Top 20px, Right 15px, Bottom 10px, Left 5px

C Top 5px, Right 10px, Bottom 15px, Left 20px

D Top and Bottom 5px, Left and Right 10px

The order is top, right, bottom, left when four values are given.

What effect does margin: auto; have on a block element with a fixed width?

A Centers the element horizontally

B Removes all margins

C Adds equal margin on top and bottom only

D Has no effect

Setting margin: auto; horizontally centers the element inside its container.

Which margin property sets the space on the left side of an element?

A margin-left

B margin-right

C margin-top

D margin-bottom

The margin-left property controls the left margin.

What happens if you use a negative margin value?

A Element gets bigger

B Element moves closer or overlaps neighbors

C Element disappears

D Margin resets to zero

Negative margins pull the element closer to others or overlap them.

Explain how the CSS margin property affects the space around an element and how you can control each side separately.

Think about pushing elements away from each other.

Describe how to center a block element horizontally using margin in CSS.

Use auto margins to balance space on sides.