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 Layout Basics Page Layout with the Float Property Wrapping Text Around Images with Floats

Posted by Mike Pickett
Mike Pickett
9,775 Points

Why do you separate out the margins into different rules rather than combining them?

In so many of the videos in this course I see where you separate out the margins you're adding to an element:

ex. .feat-img{ width: 300px; float: left; margin-top: 5px; margin-right: 25px; margin-bottom: 25px; }

Why? Should this not be a "best practice" and shown as:

.feat-img{ width: 300px; float: left; margin: 5px 0 25px 25px; }

4 Answers

Abdul Zainos
Abdul Zainos
4,938 Points

Hi Mike, you're right, there are two ways of defining margins of an element. It just comes down to preference. While the below may be a more elegant compilation, writing code all out in example 1 is a matter of preference.

I'm going to make an educated guess and say that perhaps defining elements like in example 1 was probably the way you used to write code in one of CSS earlier releases and example 2 is just a more modern way to style your CSS. Reinforcing the notion that *today *it may be subject to preference or workflow. 

#example1 {
        margin-top: 100px;
        margin-right: 40px;
        margin-bottom: 10px;
        margin-left: 70px;
    }

#example2{
        margin: 100px 40px 10px 70px;
    }
Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

Your two examples aren't exactly the same. The difference is that the first way only overrides the values you use but the second overrides all four. Remember that the Cascading part of CSS means your styles will take all the values they inherit from their parent styles and modify what you say to modify. In the first you are specifying the top, right and bottom margins but not the left. That means the left margin is not necessarily zero, but is whatever the parent style's left margin is.

Mike Pickett
Mike Pickett
9,775 Points
Mike Pickett
Mike Pickett
9,775 Points

I guess I need to change the way my question is phrased. In some of the CSS training on this site the instructors talk about best practices - one of them using as little code as possible, combining CSS where possible (example 2) rather than typing out each element on a separate line (example 1). My question was more to Guil asking why each time he had margins to enter he chose to separate them out rather than place them all in the same line - seem like more work, more typing and not the best practice.

mrhummel
PLUS
mrhummel
Courses Plus Student 1,765 Points
mrhummel
mrhummel
Courses Plus Student 1,765 Points

Yes it should. It takes less space and if you write it this way, chances to repeat yourself are lower. So therefore, smaller css file and easier to code dry. But in the end i suggest to use a css pre-processor, so it doesn't really matter.