Styling the box model with CSS

I’m trying to run through the videos before today’s class at Lambda School. Here’s a quick pictorial summary of how to style the box that surrounds HTML items on a page using CSS. I wrote short summaries of each line of CSS script in the CodePen comment in each picture:

box model 1
We start with a box. Its styled with a gray background and white text.
box model 2
We add a height and width so it doesn’t stretch across the whole screen at one line in height.
box model 3
Adding padding to the box makes it bigger than the 100×100 space we reserved for it in the design.
box model 4
“Box-sizing: border-box” forces the padding to grow inward, so the box stays at 100×100 in size.
box model 5
Adding a red border around the box. This pushes inward like box-sizing:border-box, so it doesn’t make the box grow past the space reserved for it.
box model 6
Margins are the white space outside of the box, and between it and the edge of the page and the margins of other boxes.

Here’s a link to the pre-course post in which I was first introduced to the box model:

One thought on “Styling the box model with CSS”

  1. Pingback: Lambda School: Full Stack – Week 1, Day 2 – REDO FROM START

Leave a comment