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 trialEuan Burton
3,037 PointsConcerning syntax of declarations.
i recently corrected an error made much earlier in my main.css code that i only noticed after applying changes to the header in my current lesson. I corrected the code by changing this
nav { text-align: center; padding: 10px, 0; margin: 20px, 0, 0; }
to this...
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
I understand now that I was not supposed to use the commas, but i'm curious if using the commas could actually be used for some purpose in such declarations.
what were the commas doing to the code?
2 Answers
Kidist Admasu
11,020 Pointscommas are used to separate values of same type. for example
font-family: sans-serif, 'changa one';
here it means use the first font family and if not available go to the next one.
but we don't use commas when declaring values of different type. for example in your senario
padding: 10px 0;
is a short hand of
padding-top: 10px;
padding- bottom: 10px;
padding-right: 0px;
padding-left: 0px;
Máté Végh
25,607 PointsHi Euan,
In CSS there are some cases where you should not, and some where you should use commas between values. It depends on what property you specify the values for.
In your case, the only way is to not include commas, otherwise it will break the code.
However, as I said there are some cases where you need to separate the values with commas. For instance: nav { font-family: Helvetica, Arial, sans-serif; }
As you learn more, you will get into it!