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 trialSaitluangpuia Sailo
3,517 Pointswhy we need to write the value of padding and margin to zero(0) if we dont want it.
like for example: margin: 20px 0 0; margin: 20px; Is this the same?
2 Answers
Razvan Chirca
9,945 PointsIf you want to use the shorthand notation and at the same time wanting to set just the top margin you must specify 4 values clockwise this means top -> right -> bottom -> left
.example {
margin: 20px 0 0 0;
}
This is the same as:
.example {
margin-top: 20px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
Or you can use the shortest notation for this task, using 3 values. This time the first value means margin-top, the second value left and right and the third is for the bottom.
.example {
margin: 20px 0 0;
}
/* again, same as */
.example-2 {
margin-top: 20px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
jacobproffer
24,604 PointsHey Saitluangpuia,
margin: 20px 0 0 is not the same as margin: 20px.
This first example sets only the top margin of the example class to 20px.
.example {
margin: 20px 0 0;
}
This second example sets the top, right, bottom, and left margins of the example class to 20px.
.example {
margin: 20px;
}
The reason that we would possibly need to set the padding or margin to zero is because of the default styles of the browser.
Saitluangpuia Sailo
3,517 Pointsok...i got it, i was thingking that they were the same. thank you