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

I used padding instead of margin to add space around the floated image. Why was margin the best choice?

In the media query for this exercise, I used this code

.feat-img { width: 300px; float: left; padding: 0px 15px; {

Instead of this code

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

}

1 Answer

Jacob Jackson
seal-mask
.a{fill-rule:evenodd;}techdegree
Jacob Jackson
UX Design Techdegree Student 7,833 Points

Hey Jason!

Super good question!

As you go forward, you'll find that you'll just simply develop preferences. The key difference between padding and margin in this case is that when you use padding on an element, in this case, your image, you should include the dimensions of your padding into the element.

I'll use an example: Let's say your image is 200px x200px and you apply an all around padding of 10px. You could now think of this image as 220px x 220px

Whereas with margin, if you were to do the same thing, you should still think the element as 200px x 200px with 10px of open space around the outside. Keep in mind from your lessons that there are factors that can cause vertical margins to collapse, etc.

So all that just to simply say you're absolutely right in questioning this. Is there a right answer? Nopee! Simply preference. Margin is a great example when learning however because it doesn't throw you the curve ball of having to reinterpret the element when you use it. But both can be used for a visually almost identical result.

Hope this helps! -Jake

Thank you, Jake!