Every website you visit is just a collection of boxes. Stacks and stacks of boxes. While we’ve changed how we use boxes over the past 30 years, we still build websites out of boxes. At first, the boxes were terribly rigid (tables), but recent improvements have made the boxes quite flexible (CSS Grid).
The elements you employ to provide your structure to the page still resides in HTML, but how those elements are displayed rests firmly in CSS.
In the examples below, you’ll learn how these shapes are measured, how to make those measurements more consistent, and what properties you can apply to them.
The box model
If you learn nothing else from this series of examples, you must understand how the box model works.
Three properties can be applied to all boxes:
- Margin: Pushes the box away from other elements.
- Border: The edge of the box itself.
- Padding: Interior space between content and the edge of the box.
The items in the example shown below are block-level elements. By default, block-level elements take up the full width of the page or container they are within.
A box’s dimensions are determined by adding the width, margin, border, and padding together. This isn’t a problem when a box is displayed at the full width of a page. Still, when our goal shifts to showing multiple columns, the traditional box model can become problematic to work with. While width is only measured once, margin, border, and padding are added to each side.
The four boxes in the example below show both the issue and solution for the measurement issue. All the boxes should display in a two-column design, but the first two boxes shown fail to perform as we might expect. The width, padding, and margin add up to 50%, but the box’s border forces the shape into a single column design.
The second set of boxes are performing as expected, but how?
Sometimes referred to as the box model hack, applying box-sizing: border-box; to the second pair of boxes changes how they calculate their size. Even with a larger width and border, the second set of boxes creates the two-column design we were going for.
While you could pick and choose where to apply box-sizing: border-box;, most designers append it to a universal selector * so that everything on the site uses the measurement method as a standard.
Shorthand for boxes
Throughout CSS, you’ll see multiple values applied to a single property. This shorthand example, border: 2px solid #ff0000, is compressing border-width, border-style, and border-color into a singular border property. As border applied to four sides of a box, you can apply the similar compression directionally as border-top-width, border-top-style, and border-top-color become border-top.
Like border, margin and padding also have to account for direction and directional shorthand always works clockwise from the top — property: top right bottom right;. You can compress directional shorthand further if you’re values are the same. For instance, property: 100px 50px will apply 100px to the top and bottom and 50px to the right and left of the desired property and property: 50px will apply the same measurement to all sides of a selected element.
As you can see in the example below, using shorthand can significantly curtail the amount of CSS you have to write while achieving the same result.
Dressing up the edges
Sanding off the sharp edges of the web has long been a favorite pastime of designers. I’ve heard numerous variations of the argument over the years, so I’ll spare you my allegiance on the matter. The fact remains that people like to make sharp edges round, and it’s often just a matter of style.
CSS versioning has changed over the years, but before CSS3, we had to export non-squares from programs like Photoshop. The existence of border-radius stands as an example of how the CSS specification is modified over time.
Just as with the other properties we’ve discussed, border-radius follows the same clockwise directional pattern but begins with the top-left corner. Specific measurements can be applied to each corner, or you can use shorthand as displayed in the example below.
Just as border-radius reduced our reliance on Photoshop, so did box-shadow. Shadows are another piece of the design landscape that will come and go as we migrate from one industry movement to another. Still, shadows do offer a valuable way to provide feedback to users.
Here are the values that can be applied to box-shadow:
| Value | Purpose |
|---|---|
| inset | By default, shadows appear outside of the box. Still, if inset is declared as a value, the shadow appears inside the box. |
| position-x | Determines the horizontal position of the shadow relative to the box. It can take negative values. |
| position-y | Determines the vertical position of the shadow relative to the box. It can take negative values. |
| blur | An optional value that, if omitted, will produce a solid line. When present, set in pixels. |
| spread | Determines the overall size of the shadow. It can take a negative value. |
Below are a few examples of what happens when you combine the various values.
Resources for review
Please use the following items to guide your exercise attempt:
| Article/Video | Source/Author |
|---|---|
| Writing Shorthand Properties in CSS | Mozilla |
| International box-sizing Awareness Day | CSS Tricks |
Exercise
Length: Around an hour to complete.
How well you can use and modify the CSS Box Model will determine how far you go with front-end design. This exercise was built specifically to allow you to practice those skills.
You’ll write very little code for this exercise as all the HTML, and most of the CSS you’ll need to replicate the finished work already exists. Instead, you’ll be focusing on applying properties that can be applied to the CSS Box Model using this Codepen file.
Be sure to fork the Codepen exercise and rename it before beginning your work.
///
Once complete, update your Program Journal with a link to this exercise’s final output. Post your Journal in the #Feedback-Loop channel for review.
///
Up next CSS Pseudo-Classes