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 Basics (2014) The Box Model Display Values

Keith Greatz
Keith Greatz
4,377 Points
Posted by Keith Greatz
Keith Greatz
4,377 Points

When adding multiple values where should unit (px) be placed.

Following the vid My code for my Listed items was

li {
display: inline-block;
padding: 0 12px;
border-right: 1px solid;
margin: 80 0px;
}

The top margin for it didn't work, I found when i corrected the margin to be,

margin: 80px 0;

it then worked.

My question is How come the padding can be written with the pixel on the second value and work but when it comes to the margin I needed to add the unit to the first value?

As I type this I am assuming it has something to do with the margin being 0? Margins with 0 don't need a px value?

IF anyone can help me with how I can post my code on the black background like others do that would be handy also.

Thanks

2 Answers

Darren Joy
Darren Joy
19,573 Points
Darren Joy
Darren Joy
19,573 Points

That's what I would assume too, the zero might be universal. Since sizes can be in px, or em, or %

zero for all of those tings is still zero, but any number requires a unit of measure to determine it from px or em or whatnot...

Isaiah Marin
Isaiah Marin
11,971 Points
Isaiah Marin
Isaiah Marin
11,971 Points

Hi Keith,

Also be aware of the order when you apply those values (in case you are not familiar with it). It goes as Top Right Bottom Left An Example: padding: 10px 15px 30px 35px

Note: 10px goes to Top, 15px goes to the Right, and etc..

Also to add snippets to your answers or questions I'd like to refer you to the video, "Tips for asking questions." You can find the video on the right hand side of the any Webpage with a question (like this one).