What is The Box Model? No, it's not having green eggs and ham in a box, nor with a fox. According to Head First HTML, "It's how CSS sees elements. CSS treats every single element as if it were represented by a box."
What the hell does this mean? (Watch your language please.) This means that The Box Model is applied to ALL elements, inline and block elements. Paragraphs, images, headings, lists, block quotes, everything is surrounded by an invisible box.
I'll explain further. I'll explain how Sue sees it, I mean CSS. (Damn Glee!)
Imagine CSS is a person. CSS's vision differs from ours. Do you know how bees can see a wider range of light than humans can? (Well now you do!) CSS is similar in that she can see a wider range of "light" than we can. And that extra "light" that allows bees to see more colors than us, allows CSS to see extra "auras" of boxes around XHTML or HTML elements.
Not only does she, CSS, have the power to see these invisible boxes that surround XHTML elements, but if she so decides, CSS also has the power to make them visible to us.
Before we describe how CSS can make them visible to us, let's first go into what she sees that we cannot.
CSS sees Content Area, Padding, Margins, and Borders. These are the invisible squares, or boxes, that surround our XHTML elements.
According to Head First HTML, "Every box is made up of a content area along with optional padding, border, and margins. The content area ... holds the content (text or an image, for instance). The content area is surrounded by optional transparent padding. An optional border can be placed around the padding. And finally, an optional transparent margin surrounds everything."
Imagine a square with text inside of it. This is the content area. Imagine another square around the content area, this is the padding. Padding creates whitespace between the content area and the border, and it can be used to position the content area however you please within the border.
What this looks like is a square within a square, although the padding is transparent, so you can only see the space it creates if you have a border. You can position your content square anywhere within the border square with the padding. It can be centered within the larger square. It can be moved in the upper right corner of the bigger square, the bottom left corner, wherever you want it. Adjusting the padding helps you adjust and position your elements however you want within its' border.
The border surrounds the padding, and you can make it however thick or thin as you desire, you can give it any color you wish, and you can make it solid, dashed, or other styles. From Head First HTML, "The border surrounds the padding and, because it takes the form of a line around your content, borders provide visual separation between your content and other elements on the page."
The margin surrounds your border and it creates space between your element and the surrounding elements. Adding margins helps with positioning your elements on your web page. The margins, like padding, are transparent and are visible only to our friend CSS.
These are the boxes that CSS sees, the content area, padding, borders, and margins. We can never visually see padding and margins, which position the elements, the content on the web page, but we can visibly see the border if we choose to add a border via CSS.
To learn more about The Box Model, go forward to the next post. ;)
No comments:
Post a Comment