DEV Community

Cover image for What's In The Box?
Nolan Miller
Nolan Miller

Posted on

What's In The Box?

#webdev #beginners #html #css

Se7en, What's in the Box?

Welcome back! We’re diving into the CSS Box-Model, a rite of passage for any web developer. Let’s see: "What's in the Box!?"

The Content Box

In web styling, everything is in a box. So far, we’ve only changed text sizes and colors. Now, we’ll explore positioning elements on a page with the CSS Box Model. It includes four parts: content, padding, border, and margin.

The content box tightly wraps your content, whether text, images, or other elements. For example, consider this example web page:

Example Web Page

Here, the "Join the ride!" text is an <h1> element. The content box of that element looks like it wraps tightly around the text:

Content Box Highlight

Notice the space around it? These spaces are controlled by the box model. Without it, everything would stack in the top left corner, like this:

Top and Left Style

The box model makes our pages interesting!

Padding, Border, and Margin

The rest of the box model:

Padding, Margin, and Border

Padding:

  • Between the content box and the border
  • Increases element size, combining with the content box for background properties

Border:

  • The element’s edge, which can be styled

Margin:

  • The space between elements, like an invisible pole pushing them apart

Moving Things Around

Understanding the box model is crucial for positioning elements. To save you some trial and error:

  • To move the element: change its margins.
  • To move the content inside the element: change its padding.

The Code

Let’s create our page:

<!DOCTYPE html>
<html>
  <head><!-- Metadata and linking --></head>
  <body>
    <h1>Join the ride!</h1>
    <p>A new model, each week!</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode 
h1 {
  /* Text Styles */
  margin: auto;
  margin-top: 60px;
  padding: 12px;
}
p {
  /* Text Styles */
  margin: auto;
  margin-top: 6px;
  padding: 3px;
}
Enter fullscreen mode Exit fullscreen mode

Here’s the scoop:

  • margin and padding control spacing. They’re actually shorthand properties that include the properties maring-top, margin-right, margin-bottom, and margin-left. You can keep the same format padding's properties as well.

Using one property, we can set the padding size on all edges of the element:

p {
  padding: 12px 50px 100px 2px; /* top right bottom left */
}
Enter fullscreen mode Exit fullscreen mode

Or we can set the top/bottom and the left/right to be symmetrical by setting only two values:

p {
  padding: 12px 50px; /* top/bottom left/right */
}
Enter fullscreen mode Exit fullscreen mode

Or set all the sides the same, by using one:

p {
  padding: 12px; /* all sides */
}
Enter fullscreen mode Exit fullscreen mode

Both padding and margin can use distance values (px, em) or percentages (%). The auto keyword is also handy in conjunction with margin for centering elements!

Challenge

Time to test your skills!

  1. Put four elements on a web page. Keep them roughly the same size.
  2. Add borders around them (check MDN for border styling).
  3. Center one element.
  4. Make another element’s border larger than its content.

You’ve got the tools—now go position your elements like a pro!

For a much more robust look at the box model, check out MDN's Documentation!

Top comments (0)