This course is out of date and does not reflect Frontend Masters current standards. We now recommend you take the JavaScript: The Hard Parts course.

Check out a free preview of the full Advanced JS Fundamentals to jQuery & Pure DOM Scripting course:
The "DOM Layout & Positioning" Lesson is part of the full, Advanced JS Fundamentals to jQuery & Pure DOM Scripting course featured in this preview video. Here's what you'd learn in this lesson:

Justin takes a break from JavaScript to talk briefly about how the browser lays out a page. He uses a simple div tag to explain how box-sizing affects vertical and horizontal margin/padding. He also explains some of the DOM layout properties and methods.

Get Unlimited Access Now

Transcript from the "DOM Layout & Positioning" Lesson

>> [MUSIC]

>> Justin Meyer: Given the HTML on your page, the CSS, and actually the dimensions of your browser window. How does the browser lay everything out, especially the block level layout? Right it lays that out somehow. It makes this div a certain with. And then once the element has been laid out, often it's important to know how big that element is.

[00:00:32] If you're creating a slider or something like that, you need to know how big this element, what the room to slide around in, is. Right, so the DOM provides methods that you can get an element's dimensions and location in the page. So the first thing. Yeah, I have a slider demo that basically, when you're making widgets complex widgets like on the order of something like jQuery Y, you typically have to read the current dimensions of things.

[00:01:07] So that you make sure your slider can move around like in the exact right area. I have a demo but I'm not gonna show it, but just suffice it to say, when you start building very serious widgets. Whatever their styles might be you should learn to adapt to them and that's why it's important to understand how dimensions and layout work in the browser.

[00:01:32] So let's start with the most simple example possible. You've got a body element with a div inside it that says hello world. And I'm gonna paint this green. I should have a style with green but I couldn't fit it. And we're gonna start changing some properties around on it.

[00:01:50] So when you first render this page, if I give the div a background color of green, it would just be laid out right here. And this yellow represents the default margin of the body. So if you open up a hello world with a div, you'll see that it doesn't quite extend all the way to the outside of the page.

[00:02:12] Then if I were to give this element a width of 30 pixels and a height of 30 pixels, it would then take on that dimension. And if I were to give it a padding, this padding would be the same color, they'd be the same color green. I just change the color green to illustrate that padding goes around the width of the.

[00:02:34] So if I give a pixel width of 30 pixels and a padding of four pixels. The total size of the element would look like it was 38 pixels big, right? With the default box sizing of content box, padding and border and margin is laid outside of the width of the element.

[00:02:59] So if I gave it a border of four pixels, the border be added around. And if I gave it a margin of 10 pixels on the top and bottom, and three pixels on the sides, it would be laid out like that. And that's a little strange too, so one thing to know is vertical margins are collapsed but horizontal margins push up against each other.

[00:03:24] So you can see here that the margin is 10 pixels so it's gonna be 10 pixels away from the top but the margin distance here would be eight plus three pixels, 11 pixels, all right? So it doesn't collapse the margins this direction which is a little strange to me, but that's how the the DOM works.

>> Justin Meyer: Now I had a whole spiel here but it can take a while so I'm just going to skip it. [LAUGH] This is how layout happens and just to say on a high level layout happens. Horizontal dimensions are calculated first and then vertical dimensions are calculated second, but I'm gonna skip over that, it's just not worth explaining right now.

[00:04:14] If I have time at the end I'll come back to it. So the DOM, once it's laid everything out, gives you some information about the dimensions of elements in the page. There's properties that you can read. Such as an element's offsetHeight and offsetWidth. That gives you the element's dimensions from border to border, vertical border and horizontal border to border.

[00:04:41] It also gives you a clientWidth and clientHeight. So you can do element.clientWidth and element.clientHeight, and it will give you how wide the element is with just its padding. What's weird is there's nothing that gives you the width of this content area. Strange, but jQuery does. jQuery gives you an innerWidth(), an outerWidth(), a width() function and an outerWidth(), if you pass it true, it gives you the size of the margin, all right, around the area.

[00:05:11] And also gives you these things for height. It gives you height, innerHeight, outerHeight, and outerHeight(true), to get the the corresponding dimensions.