Understanding the CSS box model


show more Understanding the CSS box model provides you with in-depth training on Web. Taught by James Williamson as part of the Dreamweaver CS3 Beyond the Basics show less
please wait ...

Understanding the CSS box model

Before we can begin positioning elements, we need to understand what the box model is and how it works. Every element, even in-line level elements, are considered to be contained within their box. So when you are a laying a page out, if you want a sidebar, for example, and the sidebar is going to be of a specific width and maybe it's going to have a background graphic or a background color to it, and you don't want the elements butting right up against it, you can actually use these box model properties to control the width, the height, the distance of interior elements away from them, or from the edges, and those types of element properties. So if you look at the slide, at the very top of it you can see that we just have a paragraph and it says the paragraph, this is element content. Well, below that, this has been styled and I want you to just for a moment imagine that the pink and the green weren't there and it is just the yellow box with a border around it.

Esse...

Understanding the CSS box model
Video duration: 10m 0s 11h 10m Intermediate

Viewers:

Understanding the CSS box model provides you with in-depth training on Web. Taught by James Williamson as part of the Dreamweaver CS3 Beyond the Basics

Subject:
Web
Software:
Dreamweaver
Author:
please wait ...