CSS Box Model

All web pages consist of elements rendered one after another. The CSS box model is one of the models that determine how much space an element can take on a web page, allowing us to customize the default layout scheme.

According to this model, each HTML element is placed in a "box." The CSS syntax for defining the box model is straightforward, as it involves setting values for the padding, border, and margin properties of an element.

The box itself is akin to a Russian doll — it's actually 4 boxes placed inside the other, starting from the innermost:

• Content: the text, image, or other media content inside the element
• Padding: the space between the box's content and its border
• Border: the line between the box's padding and margin
• Margin: the space between the box and surrounding boxes

Together, this is everything a browser needs to render an element's box.

Basically, the CSS box model is a set of rules that define how every web page on the Internet is rendered. You can set each box's size separately with associated properties.

To set the size of the content area, we use the width and height and related properties.^[1]

For padding, border, and margin, we use properties with the same name — padding, border, and margin — as well as specific properties for each side of the element.

If we don't specify any of these properties, browsers will use their default values for specific elements, for example:

body {

margin: 8px;

}

Content of the element is the information you're sharing with users, whether it's text, images, videos, etc. The size of the content area is defined by 2 properties — width and height. By default, when setting the width and height of the element, it only affects the size of the content area and not padding, borders, and margins.

Padding is the space that surrounds content inside the border. The padding property defines the padding for the selected element. For example, the following code adds 50 pixels to each side of the <div> container:

div {

padding: 50px;

}

In the example above, the padding is highlighted in purple. But in reality, the background color of the content area expands to fill the padding. It works like that because the padding is inside the border, and everything inside the border gets a background.

The border is a line drawn around the content and padding of an element. The shorthand border property has its own syntax. Let's look at the example: border: 4px solid black;.

These values define in the following order:

• The stroke width of the border (4px)
• Its style (solid)
• Its color (black)

You can also set these things with individual properties like:

• border-width

• border-style

• border-color

Margins define the space outside of an element's border — or, rather, the space between a box and its surrounding boxes. You can set it either with the shorthand margin property or individually with:

• margin-top

• margin-right

• margin-bottom

• margin-left

In the example above, the margin is added with the following declaration: margin: 40px;.

The default value of all padding is 0, which means that all box elements start with no extra spacing. To add space within the element, you'll want to add padding.

Besides the shorthand property padding, you can apply padding to each side of the element individually with:

• padding-top
• padding-right
• padding-bottom
• padding-left

Borders are common design elements, but they're also invaluable for debugging. When you're not sure how a box is being rendered, add a border: 1px solid red; declaration to it. Doing so will clearly show the box's padding, margin, and overall dimensions with just a single line of CSS. After you figured out the issue, simply delete the rule.

Margins and padding can accomplish the same thing in a lot of situations, making it difficult to determine which one is the best choice. In CSS, there's often more than one way to solve your problem.

Here are the key differences to keep in mind:

• Padding is included in the click area of an element, while margins aren't
• The padding of a box has a background, while margins are always transparent
• Margins collapse vertically,^[2] while padding doesn't

The CSS box model has been around the longest and is widely supported by browsers. It relies on margin, borders, and padding to define spacial relationships. However, it's not the only layout model. With the rise of responsive design, another model has been rapidly gaining popularity — the CSS Flexible Box layout, or Flexbox.

Flexbox provides a more efficient way to lay out, align and distribute space among items on a page by placing them into a container. In short, Flexbox can dynamically alter its items' sizes to best fill the available space depending on the screen size.

The main downside of Flexbox lies in its newness and browser support. Older browsers don't support it as well, support it inconsistently, or not at all. Flexbox also gets complicated with more complex layouts.^[3]