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

HTML How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Saitluangpuia Sailo
Saitluangpuia Sailo
3,517 Points
Posted by Saitluangpuia Sailo
Saitluangpuia Sailo
3,517 Points

why 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
Razvan Chirca
9,945 Points
Razvan Chirca
Razvan Chirca
9,945 Points

If 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
jacobproffer
24,604 Points
jacobproffer
jacobproffer
24,604 Points

Hey 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
Saitluangpuia Sailo
3,517 Points
Saitluangpuia Sailo
Saitluangpuia Sailo
3,517 Points

ok...i got it, i was thingking that they were the same. thank you