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

Posted by Edwin Rivera
Edwin Rivera
30 Points

Is it weird i don't have to declare margin right on my .name declaration?

So i when Guil is explaining to put a margin-right in the .name i noticed that my browser knew what to do simply with just margin.

Guild example .name { width: 240px; margin-right: 50px; }

What i wrote in my CSS .name { width: 240px; margin: 50px; }

they both do the same thing.

Ill still follow the video for purposes of note taking but just wondering if newer browsers are more smarter in figuring out what you are trying to do?

Your thoughts?

3 Answers

Marcus Eley
Marcus Eley
16,213 Points

Hello Edwin,

when you apply a rule that gives margin: 50px it applies that to all four sides, top, bottom, right, and left. margin-right: 50px; specifies only the right side.

I hope that clarifies things.

Edwin Rivera
Edwin Rivera
30 Points
Edwin Rivera
Edwin Rivera
30 Points

It does, Thanks :D

raj bansal
PLUS
raj bansal
Courses Plus Student 577 Points
raj bansal
raj bansal
Courses Plus Student 577 Points

You can apply Margin and Padding with two ways. First one by defining one value and second by defining all value. see the example below -

#name {
   margin-top:4px;
   margin-right:4px;
   margin-bottom:4px;
   margin-left:4px;
}

is same as 

  #name {
  margin:4px;
}

Another way to do this -

#name {
 margin:4px 4px;
}

in last example first value represent Margin-top and Margin-bottom, second value represent Margin-left and Margin-right. Hope you will get it.