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

Do inline and block elements come with a specific amount of padding and margin applied to them by default?

.

3 Answers

Steven Parker
Steven Parker
231,261 Points

You might be using the wrong term. In CSS, the word "padding" refers to space inside an element, between its content and border (though the border may not be visible).

But yes, if you have a smaller element inside a larger one, then there will be some space on at least one side (by default, on the right) between that element and its container. But it's not padding (in the container) or margin (in the smaller one), even if it looks like it might be one or the other.

When you get a chance, you might want to learn about the built-in developer tools in the browser. They allow you to visualize things like margins that otherwise can't be seen (except how they affect element positions).

.

Steven Parker
Steven Parker
231,261 Points

That's not quite it. There are other possible display properties besides "inline" and "block", but it's not set to anything by default. But each kind of element does have a default display mode that is used when no specific property is set.

Some elements have padding or margins by default, but most do not. That doesn't mean you must always add it, depending on the layout you might add some to a few elements or possibly none at all.

.

Steven Parker
Steven Parker
231,261 Points

The space you see on either side of the heading is not padding. It is because of the "text-align: center" setting.

Before that was applied (during the Text Styles video in the previous stage), the heading was against the left side.

.