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 Build Navigation with Unordered Lists

Posted by Clément Bonhomme
Clément Bonhomme
3,682 Points

Question about margin and padding

I do not understand the utility of setting :

margin:0 10px; padding:0;

in the nav ul {.

1) Regarding the right/left margin of 10px; As 'nav' is 'text-align:center' already is it useful ?

2)Regarding the padding Nick has already set up 'padding: 15px 0;' in the nav {, why does he put "padding:0;" in the nav ul { ?

What is the difference between setuping nav{ and setuping nav ul{ in this case ?

2 Answers

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

1) While it doesn't seem 100% necessary add the margins in addition to the text-align in his example, it's possible it was added to ensure there's enough spacing around the element in different viewport widths. If it's only centered and the containing elements collapse all the way against it, the layout could look cramped. Perhaps the margin as added to prevent this.

2) This could be to override default padding applied by browsers to a ul. The nav element is the parent of the unordered list here, so any padding declarations on the nav element would not change default styles on the list.

Clément Bonhomme
Clément Bonhomme
3,682 Points
Clément Bonhomme
Clément Bonhomme
3,682 Points

thx !