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 PointsWhat parent element is setting the default width of block-level elements to be equal to the browser width?
Hi, I wanted to understand this once and for all.
The default width of a block-level element is set to the width of the page. If there are block level elements inside of a parent block, then the width of the child will take on the width of that parent block by default. Great, I'm assuming this is correct. Ex. https://codepen.io/apasric4/pen/JqKwRR.html By default, the width of the <p> element (child-block) is set by its parent block element <div>, and the width of <div> is BY DEFAULT set by the width of ITS parent element, <body>. That is why the <p> element extends to the width of the page, because it is inside a parent block! (Like a hierarchy).
The default width of a block-level element is the length of the page. Okay great, but HOW? That sounds vague to me. How is this all working? What PARENT ELEMENT in this example set the width of the parent- block level element such as to be equal to the width of the page by default?
I looked online for an answer. Heres my attempt to come up with one: <body> and <HTML> are two distinct blocks, but the real parent of all the block-elements is <HTML>, not <body>. The <HTML> tag sets what the width will be for the current web page. The width of the block-level elements by default takes on this value for their width unless explicitly changed. When you change the browser window, that adjusts the width for the <HTML> tag, and subsequently, the block level elements will change in size, as to match the width value of the <HTML> tag.
That was my best shot. Hoping someone could clarify this conceptually, and relate it to my example.
1 Answer
Steven Parker
227,114 PointsYou're quite right. As described on the MDN reference page:
The HTML <html> element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.
Note that the <body> is one of the few elements that has margins by default, so the width of block elements inside it will be a bit less than that of the root (or browser window). You can, of course, remove the default margins with CSS.
Amandeep Pasricha
14,932 PointsAmandeep Pasricha
14,932 Points@Steven Parker Ah okay. When you change the width of the browser window, you are really just changing the width of the HTML block, which changes the width of the blocks inside of it (The HTML element houses the <body> block and the blocks inside of it). It literally goes back to the first video I watched with Treasure Porth, where the web page starts with an <HTML> tag as the entire encompassing block, and everything inside of it is just more blocks.
Is my analysis correct? I'm really trying to understand the big picture here and I feel like this makes so much sense now that I connected to it that big picture.
What you said about the <body> also makes sense too. So do the widths of blocks match more closely to the width of <body> or <HTML>>
Steven Parker
227,114 PointsSteven Parker
227,114 PointsIt sounds like you've got the right idea. Boxes inside boxes.