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!
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
Amandeep Pasricha
14,932 PointsDo inline and block elements come with a specific amount of padding and margin applied to them by default?
if the width of an inline-block is defined by its content, would that imply it doesn't with a certain amount of padding on specific sides of the element?
3 Answers
Steven Parker
228,026 PointsYou 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).
Amandeep Pasricha
14,932 Points@Steven Parker In the video, the main heading Lake Tahoe, California had orange space on its left and right side, and I assumed that this was PADDING that was already given it by default from the browser (without us manually adding anything to CSS). Thats why I started assuming that inline and block level amounts must come with a specific amount of margin and padding added to them? The borders around inline were very tight around the content, so I assumed they came with no padding?
Was that initial analysis that I made when I watched the video completely incorrect?
Steven Parker
228,026 PointsThe 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.
Amandeep Pasricha
14,932 PointsAmandeep Pasricha
14,932 PointsSteven Parker Lol, I'm still confused. But please help me. Let me get this sorted out: Each HTML element, by default, has a display property applied to it by default, with values being inline or block. For ex. headings would be block elements, while anchors would be in-line elements. Great.
So if every HTML element by default is a CSS box model (or does this term only concern the DISPLAY of an HTML element?), does that mean both HTML elements that are block and inline come with a certain amount of padding and margin by DEFAULT (without us having to manually type and add a margin and padding property in CSS)?
OR would, block have padding and margin, while inline elements have padding on both sides by default, but just no margins by default. This is essentially the crux of what I'm trying to get at.
Steven Parker
228,026 PointsSteven Parker
228,026 PointsThat'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.