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 CSS Basics (2014) Basic Layout Lists

PINWEN CAI
PINWEN CAI
1,870 Points
Posted by PINWEN CAI
PINWEN CAI
1,870 Points

Why left indented if the margin is set as 30px 0?

in this video, Guil tried to give the ol lists left indented and set the margin {30px 0;} I see the top and bottom of each list gain much more space. But should not the 0 means the left and right margin stay the same? Why the result become left indented?Many thanks.

2 Answers

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

Ordered Lists (ol) have a default margin of 16px on the top and bottom, 0 on both sides. BUT, they also have 30px of left padding. That is why you are seeing an indent.

If you're saying that the list had no indentation prior to you adding margin:30px 0, maybe you are using a normalize.css file or some other styling that sets the margin-left to -30px in order to counteract the padding.

frontend
frontend
15,619 Points
frontend
frontend
15,619 Points

The Box Model is really the meat and potatoes of CSS. margin: 30px 0; means that the top and bottom will have a margin of 30px and right and left stays the same. It is just a shorthand way of saying..

margin: 30px 0px 30px 0px;

Hope this answers your question.