The CSS Box Model

The CSS box model describes the design and layout surrounding content on a web page. The box model consists of the content itself, padding, border, and margin.

I. Content:

The content describes what’s inside of an HTML element. Content could be media like an image or just plain text.

II. Padding

Padding is the space between the content and the border of the element.

III. Border

The border wraps around the content and the padding. I think of the border as the content’s picture frame.

IV: Margin

Margin is outside the border and is the space separating one element from another.

You can adjust the size of each of the above properties through CSS.

I. Adjusting an Element’s Size

By using CSS height and width properties, you can adjust an element’s size to meet your specifications. Say we have a div:

The CSS styling for this is:

.box {
  height: 200px;
  width: 200px;
  background-color: red;
}

You can see that this square is 200px by 200px. We got that measurement by adjusting the height and width of the div using the CSS properties. The default value is auto. You can also set the height percentage which sets the height to the percent of the containing element. Other values you can use for height and width are initial, which sets the height and width to its default value, and inherit which will inherit height and with from a parent container.

II. Adjusting an Element’s Padding

Padding represents the space between the content and its border. You can specify which direction you want the padding to be in with the properties, padding-top, padding-bottom, padding-left, and padding-right. Alternatively, you can just have the padding property and specify the direction by adding four values.

You can see that there’s spacing between ‘Hello’ and the black border. This is the element’s padding. Here’s how we’re doing this:

.box {
  padding: 20px 30px 20px 30px;

The four pixels represent the direction in a clockwise direction starting with the top. We have top, right, bottom, and left. Alternatively, if our top and bottom are the same and our left and right are the same, we can simplify this by doing:

.box {
  padding: 20px 30px;
}

III. Adjusting an Element’s Border

The border is quite simply the boundary of an element. Like the other parts of the CSS box model, the border of an element is able to be manipulated.

Here’s what the CSS looks like.

.box {
  padding: 40px;
  border: 4px solid red;
  text-align: center;
}

You can ignore the text-align: center for now, but pay attention to the border property. You can see there are three values. The first specifies the width of the border. If I were to change the first value to 2px, you could imagine the border-line thickness decreasing. The second value describes what style of the border we want. Solid means solid line. We can also specify dotted, dashed, and many others. I’ve attached some documentation on the types of borders below. The final border value is color which we can change to whatever color we’d like.

IV. Adjusting an Element’s Margin

The margin as discussed earlier sets the margin area of an element. Similar to padding, we can specify the margin we want on all four sides. for example:

.box {
  margin: 10px 50px 20px 40;
  padding: 40px;
  border: 4px solid red;
  text-align: center;
}

This would give us:

We can see the spacing between the red border and the blue border. This is because of the margins we set around the red border. We also don’t have to specify the margin. We can set the margin’s value to auto, which would horizontally center the element within its container.

I’ve attached some resources that have helped me clarify these concepts. Let me know in the comments if you found this helpful or have any questions.

Resources:

CSS Box Model

CSS Padding

CSS Borders

https://www.w3schools.com/css/css_margin.asp#:~:text=The%20auto%20Value,the%20left%20and%20right%20margins.