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
Soufiane Bdaoui
9,602 PointsDifference between Margin and Padding
The question is: "It looks like we need a little space between the icon and text. In the same rule, add a right margin of 20px."
This is the rule:
`css
.badge-icon { float: left;}
`
This is the html:
`html
<!DOCTYPE html>
<html>
<head>
<title>Floats</title>
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="badge">
<img class="badge-icon" src="flag.png">
<h4>Build a Simple Website</h4>
<p class="badge-desc">Smells Like Bakin' is a cupcake company in need of a website. This project will walk us through the basics of HTML and CSS from the very beginning. HTML and CSS are the structural and presentational building blocks of every website and will serve as the foundation for any web project.</p>
</div>
</body>
Using padding instead of margin is a mistake? if yes, why?
Soufiane Bdaoui
9,602 PointsThanks!
2 Answers
Colton Fitzgerald
15,815 PointsWell, margin is the space on the outside of an object. Think of a div tag. The space between that div tag and the other div tags around it would be its margin. The space inside of the div tag, between the border and whatever is inside of it would be the padding. So imagine a box with a border. If you wanted the inside to be larger, you would use padding. This whole concept is called the box model and if you wanna learn more in depth about it, check out the Box Model section in the CSS Foundations course you're taking.
Soufiane Bdaoui
9,602 PointsI do know the difference, but i'm insecure in this particular case. The exercise ask for margin, but if i put some padding, isn't the same thing? i tried adding both of them ( padding and margin) and it worked fine for me.
Jeff Everhart
21,732 PointsIt might work the same in this instance because the .badge-icon image is enclosed in the .badge div, but that will not always be the case.
Soufiane Bdaoui
9,602 PointsThat can be true... thanks for the answers!
francismatongo
5,071 Pointsimg[class="badge-icon"]{ float: left; margin: 0px 20px; }
Jeff Everhart
21,732 PointsJeff Everhart
21,732 PointsMargin and padding are different properties. Margin is applied on the outer edges of an element to determine how far away it is placed from other elements. In this example the .badge-icon img will have a margin on the right side of an extra 20 px.
Padding is used to provide more room in between content and its containing element.
You can learn more about the CSS box model here: http://www.w3schools.com/css/css_boxmodel.asp
Either way, the question is asking for a margin rule, so I doubt that it'll evaluate anything other that {margin-right: 20px;} as correct.
Hope that helps!