CSS Box Model

A CSS quick overview:

• CSS (Cascading Style Sheets) is used to style web pages. CSS allows you to have creative control over the layout and design of your web page. Some examples include font sizing, color, positioning, etc.
• CSS style properties can be kept in one document. This document is separate from your HTML file, and can be linked together with the <link> tag.
• CSS stylesheet can be either internal or external. An internal CSS stylesheet will have CSS styling located inside the HTML file. An external CSS stylesheet will have CSS styling styling located in a separate CSS file.

One CSS fundamental to know is the Box Model. The Box Model is essentially a box, wrapping around HTML elements. The box consists of four small boxes: margins, borders, padding, and the actual content. The image below is an illustration showing a clear example:

Illustration of the CSS Box Model.

The box model is made up of four boxes: content, padding, border, and margin.

Content, the innermost box, is where the text and images appear.

HTML Content in my index.html file

Padding, the second inner most box, sits outside of the content area. The padding is the space between the content area box, and the border. The padding property is used to provide spacing directly outside the content. Here’s an example of the padding property in action:

CSS Padding Property applied in my style.css file

Border, the second outer most box, is the line drawn around the edge of the border box. Border falls between padding and margin, and is the line around on and all four sides.

The border property requires three values: width, style, and color. These three values can be broken up into: border-width, border-style, and border-color properties.

Border can have different appearances. The common styles are solid, double, dashed, dotted, and none. However, there are several other styling choices you can choose from. Here’s example code for a 3-pixel-wide, solid, black border that wraps around all four sides of a <div>.

CSS Border property applied in my style.css file

Margin, the outermost box, is completely invisible. Margin has no background color, and will not obstruct elements behind it. You will only see margin if you apply color to it. In this tutorial, I’m not applying color to the margin, so it will remain invisible.

Margin falls outside of the border. Here’s an example of the margin property in action:

CSS Margin property applied in my style.css file

Depending on the CSS element, browsers may apply default margins and padding to an element to help with readability and spacing. Default margins and padding for these elements may differ from browser to browser, and element to element.

Our code result ends up looking like this:

Our code in effect!

With CSS, its important to understand the box model. Why do I say this? Because once you understand the box model, you will have the basic fundamentals to work with various CSS properties.

-D.