CSS Fundamentals: Thinking inside the box

Photo by Jackson So on Unsplash

CSS Fundamentals: Thinking inside the box

Before you get started with CSS, keep one thing in mind: EVERYTHING IN CSS IS A BOX (pardon my yelling, but I had to make my point). Take your search bar, for example, it is a box; A circular icon? It is a box (we apply border-radius to make it appear circular). A navbar you say? Guess what... It is also a box! So “box” is the core of CSS fundamentals. This article will cover everything about the Box model of CSS.

CSS: Cascading Style Sheets

Types of boxes

In CSS there are two types of boxes:

  1. Extrinsic the static one.
  2. Intrinsic the dynamic one.

Extrinsic Box:

As the name suggests this box gets defined by the external values that we provide irrespective of the internal/default content.

h1 {
  width: 100px;
  border: 2px solid #000;
}

When we define a box with a fixed width, its size doesn’t change even if the content inside it increases or decreases.

Intrinsic Box:

In contrast to the extrinsic boxes, the intrinsic box adjusts itself according to the content inside it. So, the box remains dynamic and keeps changing according to its content.

h1 {
  width: min-content;
  border: 2px solid #000;
}

To make a box intrinsic, just set the width property to min-content or max-content (there are still many more ways to define the intrinsic boxes). So, now the browser will decide the width of the box, thus preventing overflow.

Making a box extrinsic is like you are driving a car and having the entire control of it. But making it intrinsic is like putting the car on autopilot and now the car will make its own decisions based on its internal algorithms. Here the car is our web browser.

Box Area Model

So let us understand what the box model comprises of

1. Content Box:

Content Box is where our content lies. Any text, image, links, videos, or any other HTML component will be covered in this box.

2. Padding Box:

It surrounds our content box and creates extra space, this makes your content look clean and prevents it from sticking to borders. Padding is set by using the padding property.

3. Border Box:

It surrounds the padding-box and the border property is used to define it. You can also consider the border as the frame to our photo.

4. Margin Box:

It surrounds the border-box. It gives our box, an area to breathe. Margin is set using margin property.

Shadow and outline reside in the margin box. Consider them to be painted over the margin box and hence, they do not add to the width of the box during width computation.

Shadow is set using the box-shadow property and outline is defined using the outline property.

Calculating the box size:

Can you guess the box width from the below-given CSS?

.my-box {
  width: 200px;
  padding: 10px;
  margin: 5px;
  border: 2px solid black;
}

BoxCal1.png

Here we can clearly see the width we defined is 200px, but that only covers the width of the content not the entire box. So the size of the entire box can be calculated as 200px + 2*(10px) + 2*(2px) + 2*(5px) = 234px.

But, what if you want to accommodate the entire box within the width you specified i.e., 200px. For that, you can add one more property box-sizing: border-box; as shown below

.my-box {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  margin: 5px;
  border: 2px solid black;
}

BoxCal2.png Notice the width of the content box (innermost) changes to 176px even though it was set to 200px because of border-box.

While debugging the CSS, try to use box-shadow or outline instead of border because they don’t hinder the pixels and are not used in the calculation of the box size. So, based on this what will be the box size if we put the shadow or outline?


I hope you got my point of thinking inside the box in terms of CSS. Stay tuned for more tech-related blogs and until then keep CSS-ing.

Resources