CSS: The Box Model

This blog covers the basics of the Box Model with a CodePen example at the bottom to guide you along. Jump To CodePen

Box Model

w3schools Box Model

In Chrome Developer tools, you can find a box model you can use to debug your CSS.

The Box Model refers to the boxes that are generated with every HTML element. The browser sees each HTML element as a rectangular box. There are 4 parts of the Box Model:

1. Content
2. Padding
3. Border
4. Margin

Inline & Block Level Elements

This link will give you more information on inline and block elements and will also show you all HTML elements with their level type:

• w3schools inline/block elements

Inline Elements

HTML Inline elements take as much space as the text in the content box. They stay on the same line, next to each other until the line runs out of available space, then the next inline element begins on a new line. The width and height properties do not affect inline-level elements.

Block Elements

HTML block elements span the entire width of their container but they keep the height of the text in the content box. They always begin on a new line and stack on top of each other, unlike inline-level elements. The width and height properties will affect block-level elements but will not affect inline-level elements.

The display Property

The display property can be used to change the default behavior of inline/block level elements with three properties: inline, block, or inline-block.

• Changing the display of an inline element to block will allow you to use width and height properties.
• Changing the display of a block element to inline will allow you to place elements side by side instead of stacked on top of each other, but will also make width and height ineffective on those elements.
• Changing the display of either inline or block to inline-block will give characteristics of both to the elements. Width and height values will now affect the elements just like how it affects block level elements, but the elements will now stand next to each other side by side, like inline level elements.

More information on the display property: w3schools display property

• The Content box is where the content resides. Content can be text or images.
• Padding surrounds the Content Box. It gives space inside of the element around the content box.
• Border goes between margin and padding. It surrounds the padding and content box.
• Margin is the space that surrounds the whole element.

All four of these boxes together determine the total area of an element.

---

The 5 properties of the Box model are: Width, Height, Padding, Border, Margin.

Width

Adjusts the width of the content box. More information on the width property can be found here: w3schools width property

Height

Adjusts the height of the content box. More information on the height property can be found here: w3schools height property

Padding

Padding will add or remove space within the element but will do so around the content box. More information on padding properties can be found here: w3schools padding property

Border

Border is added between padding and margin. More information on border properties can be found here: w3schools border property

Margin

Margin will add or remove space around the element. More information on margin properties can be found here: w3schools margin property

For Box Properties, we will use the percentage and length data types.

• When percentages are used, it is defined by the size of its containing(or parent) element. If there was a div with width of 500px, and the element inside of the div uses a width of 50%, the width of the inside element would be 250px.

Pixels should be the only Absolute length unit you use for websites.

See CSS Best Practices: https://gist.github.com/basham/2175a16ab7c60ce8e001

Relative length units are dependent upon the length of another element.

Using relative units can be useful for creating flexible layouts that display well in different screen sizes.

• em and rem are defined by the font size of the parent element and the root element.
• em inherits font size from its parent
• rem inherits font size from the root element

More on CSS Units: CSS Absolute & Relative Units

Here is the example that covers these properties and the box model here in CodePen.

Hit 'Edit on CodePen' to follow along. 👍