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 Padding

Andy Saini
Andy Saini
5,287 Points
Posted by Andy Saini
Andy Saini
5,287 Points

Padding for grouped block elements?

So in the example in the video, two block elements(h1, p) are grouped together in another block level element(div). It was also explained in the previous video that each block level element results in a newline before and after it. How are the newlines managed when elements are grouped as mentioned before?

2 Answers

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi Andy,

If the 'space' you're referring to is above and below the element then that will probably be the padding and margins of that particular element.

For e.g. H1 tags will typically have padding above and below which results in you see space above and below.

Why is this spacing here? Well browsers will have their own particular rules as to which elements are given padding/margin and thus for e.g. Chrome may add padding to H1 tags automatically without you deciding.

You can amend this though by using a CSS reset which removes all paddings/margins from elements so you can decide which element has them.

Andy Saini
Andy Saini
5,287 Points
Andy Saini
Andy Saini
5,287 Points

Hi Joe,

Thanks for the explanation, I hope CSS reset is covered in one of the courses here at TreeHouse.

Sam Baines
Sam Baines
4,315 Points
Sam Baines
Sam Baines
4,315 Points

Hi Andy - the way the box model works I believe is that the two grouped elements (h1, p) will stack inside the parent (div) element, the H1 will be on top of the P element inside the parent div, if that makes sense but obviously they could also be made to run inline-block - thus they can run in a straight line if the parent element is wide enough to allow it.

Maybe this reference will help you understand it better. Also remember the box-sizing: border-box; css element will push all the padding of elements inside of the overall width and height.

Andy Saini
Andy Saini
5,287 Points
Andy Saini
Andy Saini
5,287 Points

What about the space that a block element entails(newline before and after)? are those considered a part of the block element that groups two or more other block elements?