Welcome to the Treehouse Community
Looking to learn something new?
Amandeep Pasricha14,932 Points
What 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.
Steven Parker216,045 Points
You'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.