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
Andy Saini5,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?
Joe Consterdine13,965 Points
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.
Sam Baines4,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.