Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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