CSS Box Model Stripped to the Basics

CSS Box Model Stripped to the Basics

Each HTML element on a page has four different properties. Content, Padding, Border and Margin. These are known as the box model. A working knowledge of the box model is critical to becoming a CSS ninja.

Let’s look at a diagram of the box model. In the middle is the content, then there is padding, then the border, and finally the margin.

[embed]https://www.youtube.com/watch?v=mbtVeca7jss[/embed]



Let’s break these down.

First, the content layer. That’s the good stuff, like if you just saw me naked, that’s the content. In paragraphs or headings this is the text, for images it’s the picture. The size of the content depends on the type of the object, but it can be altered with the CSS properties: width and height.

Padding provides separation between the Content and the Border. So my boobs look pretty big, but that might some padding in my bra, it’s not, just saying. Padding is a CSS property. It’s thickness can be controlled individually, on the top, right, bottom, and left with specific properties. I prefer to be on top. They can also be defined all-at-once with four different values, like 10 pixels, 20 pixels, 15 pixels, 25 pixels. Or, two properties which affect the top and bottom, and, left and right, like padding 10 pixels, 15 pixels. If you specify a background color for a piece of content it will extend to the border of the padding.

Next is the border. This provides a visual container around the element. It lives between the margin and the padding. You can specify the border color, width, and style: dotted, solid, or double solid. As with padding, you can specify the top, right, bottom, or left individually, or list 2, 3, or 4 values in the same border property. To specify a solid, one-pixel, black, border for all sides use: border—one-pixel—solid—black.

The last is margin. That’s my personal space. The margin provides separation between elements. It is transparent, so it will be the color of its parent element. It can be sized like padding, one rule for all sides, or you can specify the width on a per-side basis. CSS Box Model Stripped to the Basics

When you set the width and height properties of an element with CSS, you’re setting the width and height of the content area. When you specify Padding on an element, it will increase the size of the element. We have a div. It has a width and height of 10 pixels, and then add padding of 5 pixels to all four sides, the size of the element will be 20 pixels by 20 pixels. I’ll wait while you do the math.... Did you get it?... Good boy. If you add a one-pixel border to the element, the size will be 22 pixels. And so on for the margin. CSS Box Model Stripped to the Basics