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 CSS Foundations Text, Fonts, and Lists List Styles

Posted by stevencooper
stevencooper
5,755 Points

how do the numbering conventions for margins & padding read? The order seems to keep changing.

When adding a numeric value to margins, I am confused as to the order in which they are presented. When using 4 values, (1px, 2px, 3px, 4px) from left to right, I thought that it went top (1px), right (2px), bottom (3px), left (4px).

When using 3 values, 1px, 2px, 3px, i thought the order, from left to right, went top (1px), right & left (2px) and bottom (3px).

When using only 2 values, 1px 2px, i thought the order was top & bottom (1px), right & left (2px).

When using only 1 value, 1px, I thought the order was applied to all 4 sides equally.

I'm confused because in the video I'm currently watching, CSS List Styles, the values for margin are given as 0 2px, and the instructor said that it was 0 px from the left & 2px from the top. This seems to be much different from the previous descriptions.

Can someone please explain the numbering conventions to me? Thanks!

2 Answers

Ethan Lowry
PLUS
Ethan Lowry
Courses Plus Student 7,323 Points
Ethan Lowry
Ethan Lowry
Courses Plus Student 7,323 Points

Hey Steven,

The way you described it is totally correct - I haven't watched the video in question but if what you quoted is true, it's either a mistake on the teacher's part or perhaps there is some other context you're missing. (Or something I've never heard of either :) )

But the important thing is that yes, the ordering you know is the right one.

stevencooper
stevencooper
5,755 Points

Thanks

chazel
PLUS
chazel
Courses Plus Student 6,961 Points
chazel
chazel
Courses Plus Student 6,961 Points

Hi Steven,

The difference is that in this video, Guil is referencing an abbreviated form of the background property's background-position. This property is defined by x and y values, x being horizontal and y being vertical. Here is an example:

background-position: 0 2px; /* 0 from the left; 2px from the top */

There are other non-numerical values that can be used for background-position, such as "left top," "right top," and "center top." Note how the first word specifies a horizontal location while the second word specifies a vertical location.

The source code that Guil uses in this video is an abbreviated form of three background properties, which places the background-position property at the end:

background: url('marker.png') no-repeat 0 2px;

In long form, this would normally be:

background-image: url('marker.png'); background-repeat: no-repeat; background-position: 0 2px;

Just remember that these values are not margins or padding but position. Their order and point of reference will become more important later in a variety of other CSS properties as well.

Great question!