Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

CSS Box Model

To understand many CSS uses, you need to understand the CSS box model. Any HTML element can be considered a box. Some boxes are stacked on top of each other vertically (block level elements), and others line up horizontally (inline elements).

The box model applies to all visual HTML elements, so the properties and values of the box model can be used with any visual element such as paragraphs, divisions, headings, images, etc.

The image on the left shows a diagram of the CSS box model. The white area in the center represents the content of an HTML element, such as an image or a paragraph of text.

The blue area that surrounds the white area is a CSS property called padding. Padding places a cushion of space, or padding, around the content and the edge of qualified containing element. A qualified containing element is something like a paragraph or division. Padding can't be applied to content like an image because content can't be placed inside of an image. You can use the margin property to place a cushion around the image.

If the containing element is a paragraph, for example, a padding of five pixels would create five pixels of empty space between the text and the edge of the paragraph box. In other words, padding is empty space between the content and the inner edge of the containing element.

The black line at the outer edge of the padding is the border. If there was no padding, the border would butt up against content inside the containing element. In other words, the blue wouldn’t be there and the border would be at the edge of the content in the white HTML element area.

The gray area outside of the black border is the margin. The margin provides a cushion of space between the outside edge of the containing element and the outer edge of any surrounding content (which I cleverly illustrated by repeatedly writing "other content").

The area outside of the margin may be the parent element or other content, such as text.

The image to the right gives you another perspective. The top depiction shows a paragraph inside a division with padding on the inside and a margin on the outside. The second depiction shows the same set up without the margin. The third depiction shows the same set up without the margin and padding.

The margin is always invisible, so the background color or background image of the parent element will show through the margin. You’ll find more detailed info about margins in the CSS margins tutorial.

The border is whatever color you choose, and the thickness of the border line is whatever you set it to be. There are different line styles available as well, such as dashed or dotted. Borders are explained in more detail in the CSS borders tutorial.

The padding is as thick as you set it to be also, but as with the margin, any background color or image of the parent element will show as the background of the padding. Padding is further explained in the CSS padding tutorial.

That’s the box model in a nutshell. I hope you like nutshells.

To summarize: the box model consists of four parts:

The HTML element
• The CSS padding property
• The CSS border property
• The CSS margin property

You can use any combination of padding, border, and margin properties that you choose. None are required, and any one or two properties can be used with or without the others. You can also set different borders, margins, and padding on each side of the box model—they do not have to be the same on each side.

This box model is associated with divisions, paragraphs, headings, images and many other elements—and can even be applied to individual words, a bit like this.