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

Michael Hanna
Michael Hanna
17,649 Points
Posted by Michael Hanna
Michael Hanna
17,649 Points

Won't margin: 30px 0; eliminate the browser-applied left indent in earlier versions of ie? Or not worth worrying about?

The bigger question relates to when to use shorthand margin notation. As I understand it currently, you should only use shorthand when you want to set all four values for the element. Near the end of this video, we restored the left indent to our lists by removing a padding-left value from the ul, ol rule. We had also added a margin-left value of zero to accommodate older versions of ie (which use margin instead of padding to indent lists).

Instead of

margin: 30px 0;

wouldn't

margin-top: 30px;

margin-bottom: 30px;

be better?

Gunhoo Yoon
Gunhoo Yoon
5,027 Points
Gunhoo Yoon
Gunhoo Yoon
5,027 Points

If having custom top-bottom margin and leaving list's left-indent styling to browser is what you want then what you did is not better but necessary precaution. The question is do you want the browser to handle that particular styling or not. It really depends on type of reset css, overall structure and how far you want to go with supporting older browser.

1 Answer

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hi Michael,

Both could essentially accomplish the same thing, but there are two things to consider.

1- If the browser default or a previous rule has set a right/left margin that you now need to be zero, it won't be with specifying a specific margin.

2- Short hand is always better because it is more DRY coding. Why type 2 lines (37 characters) vs 1 line (15). It's more than double the amount of typing... and thus, more than double the amount of data being called by the website.

Keep Coding! I hope this makes sense. :)

Michael Hanna
Michael Hanna
17,649 Points
Michael Hanna
Michael Hanna
17,649 Points

Thank you Jason.

It does make sense, I think. Just to confirm, using shorthand always sets all four margin values?

If I only want to set the top and bottom margins, and want to allow previous rules to determine the left and right margins, is there shorthand for that? As I understand it, I'd have to use margin-top and margin-bottom to accomplish that.

Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Yes, when using short-hand, all four values have to be set. So, if there is an instance where it is vital to specifically set only certain ones (or leave certain ones untouched), you would need to use the specific margin-top or whichever one.

Here's a good resource on the MDN you can have a look at for more detailed info.

:)