Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website Styling Web Pages and Navigation Create a Horizontal List of Links

Christopher Swier
Christopher Swier
1,069 Points
Posted by Christopher Swier
Christopher Swier
1,069 Points

Margins 2 or 4?

How do you know if your margins should have 2 places or 4 places for spacing.

ie, margin: 0 10px 0 5px; vs margin: 0 10px;

3 Answers

Donny van Walsem
Donny van Walsem
1,815 Points
Donny van Walsem
Donny van Walsem
1,815 Points

Sometimes you want a different margin for each side like:

margin: 12px 30px 5px 10px;

It goes top, right, bottom, left;

but margin with 2 values 

margin: 10px 20px;

Will give top and bottom 10px margin and left and right 20px

Cameron Cottle
Cameron Cottle
13,742 Points
Cameron Cottle
Cameron Cottle
13,742 Points

Margins work from top, right, bottom, and left with four values. If the left margin needs to be a different size from the right you would use all four slots.

If the margins are going to be the same on the left and right you would only need to use two. In this case the second value represents the left and right margin.

I should also note that if you add a third value ie margin: 0 0 2em; this would add the margin of 2em to the bottom of the element in question.

I hope this answers your question.