` tag, the image of an `img` tag, etc...) * The **padding** — the space around the content but inside the border. This is the "background" of the content. * The **border** — the space around the padding. * The **margin** — the space around the border and "between" adjacent elements. * **Margin collapse** occurs when two vertical margins meet and the larger margin "wins". * The `box-sizing` property determines how the total width and height of an element is calculated. * The default `box-sizing: content-box` setting has the `width` and `height` properties affect the content box, with padding and border dimensions added. * The `box-sizing:border-box` setting makes the `width` and `height` properties affect the border box, with the content box automatically shrinking to fit inside the padding box. * A **CSS Reset** is a set of rules intended to remove default CSS styles applied by the *user agent stylesheet*. ```css * { margin: 0; padding: 0; box-sizing: border-box; } ``` * The `display` property changes how elements are arranged relative to each other: * `display: block` elements will stack on top of each other, regardless of their width. * `display: inline` elements will sit next to each other (if there is space available) and are not affected by the `width` or `height` properties * `display: inline-block` elements will sit next to each other (if there is space available) and ARE affected by the `width` and `height` properties * `display: none` elements are removed from the flow of the document. ## Intro to The Box Model You've learned how to apply colors, fonts, and basic spacing to HTML elements using CSS. Now you need to understand the fundamental concept that controls how elements take up space on a webpage: **the box model**. ### Web Design 101: Every Element is a Box The first rule to understanding CSS and web design is that **every HTML element is rendered as a rectangular box**. Even elements that don't look like boxes (paragraphs, headings, links, images, buttons) are all boxes. Understanding how these boxes work is essential for controlling layout and spacing. Open up your `index.html` file from the last lesson in the browser. Then do the following: 1. Right click on your website and select "Inspect". This will open your browser's **Developer Tools** where you can see the HTML structure of your elements and the CSS styles applied to them. **In the bottom-right corner is the Box Model diagram.**  2. Choose the **element selector tool** (look at the developer tools and it is the arrow icon in the top-left corner). 3. Then, hover over different elements to see each element's box. You can see clearly how every element is a box if you add this CSS declaration to your webpage: ```css /* All elements have a 1px solid red border */ * { border: 1px solid red; } ```  Knowing that everything is a box, we must start by learning how to control those boxes. ## Box Model The **box model** defines the size and spacing of any element and it consists of 4 parts, from the inside out: 1. The **content** — the space that the content of an element occupies (the text of a `
` tag, the image of an `img` tag, etc...)
2. The **padding** — the space around the content but inside the border. This is the "background" of the content.
3. The **border** — the space around the padding.
4. The **margin** — the space around the border and "between" adjacent elements.
### Content, Width, and Height
The **content area** holds your actual content (text, images, or other nested elements).
You can control the content dimensions with `width`- and `height`-related properties.
Look at the existing CSS for your `figure` and `img` elements:
```css
img {
width: 100%;
}
figure {
max-width: 300px;
}
```
This is a really common pattern for handling image sizing:
* The `img` selector sets all images to fill 100% of their container's width.
* The `figure` selector uses `max-width: 300px` to constrain the figure (and therefore the image inside it) to a maximum of 300 pixels wide.
* If the screen is smaller than 300px, the figure will shrink to fit.
**TODO:** Set a width on our navigation links and a max-width on our sections:
```css
nav>a {
/* ... existing styles ... */
width: 10rem;
}
section {
max-width: 600px;
}
```
Refresh your page. Notice that the `width` on `nav>a` doesn't seem to work yet—we'll fix that in the Display section!
### Padding: Space Inside the Box
**Padding** creates space between the content and the border. It's inside the element so it takes on the element's background color.
The header is looking a little bit cramped with the links inside. Let's add some padding to give the content some breathing room:
```css
header {
background-color: var(--color-dark);
padding: 1rem; /* <-- add this. play around with the value */
}
```
You can also assign different padding amounts on each side by providing multiple values. Let's update our navigation links to be more button-like:
```css
nav>a {
background-color: var(--color-accent);
color: var(--color-white);
text-decoration: none;
font-weight: bold;
padding: 0.5rem 1rem; /* <-- 0.5rem top/bottom, 1rem left/right */
}
```
**TODO:** Add a padding to your section elements, to each `.programming-skill` element, and to each `.quote` element.
### Border: The Edge of the Box
The **border** is the line around the padding. The `border` property has three values: width, style, and color.
Let's add a border to each `section` to visually separate them and create a "card" effect:
```css
section {
background-color: var(--color-white);
max-width: 600px;
padding: 1rem;
/* Add this */
border: 2px solid var(--color-accent);
}
```
Common border styles include `solid`, `dashed`, `dotted`, and `none` (default).
#### Adding Borders to One Side
You can also add a border to just one side of an element using `border-top`, `border-right`, `border-bottom`, or `border-left`.
Let's add a bottom border to our `h2` elements to create a nice visual separator:
```css
h2 {
border-bottom: 2px solid var(--color-accent);
padding-bottom: 0.5rem;
}
```
**TODO:** Add a left border to the quotes. It should be 4px, solid, and using your accent color.
#### Border Radius
You can control the curve of the corners of your border with `border-radius`:
```css
section {
background-color: var(--color-white);
max-width: 600px;
padding: 1rem;
border: 2px solid var(--color-accent);
border-radius: 8px; /* <-- add this */
}
```
Let's also add `border-radius` to our navigation links:
```css
nav>a {
/* ... existing styles ... */
border-radius: 8px;
}
```
To make a perfectly circular border, use `border-radius: 50%`. This works great for profile pictures! Let's add this to our `#profile-picture`:
First, add an `id` to your profile picture so we can style it later:
**HTML:**
```html
Mathematician | Pioneer of Computing | Visionary Thinker
### Display Challenge
Let's change the display of the `.programming-skill` list items so they appear next to each other instead of stacked vertically.
We want them to appear next to each other and have control over their width/height. What display should they have?
Try it out, then look at the solution below.
Q: We want our nav links (
If we wanted to keep the `` elements on the same line but also have control over their dimensions, we can change them to have `display:inline-block`:
```css
nav>a {
background-color: var(--color-accent);
color: var(--color-white);
display: inline-block; /* <-- add this */
width: 10rem; /* <-- now this works! */
margin-inline: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 8px;
}
```
<a> tags) to be 10rem wide AND keep them on the same line. Which display should we use?
## The Box-Sizing Problem
By default, `width` and `height` only apply to the **content area**. Padding and border are added on top.
Let's see this problem with your navigation links. They currently have this styling:
```css
nav>a {
display: inline-block;
width: 10rem;
padding: 0.5rem 1rem;
border: 2px solid var(--color-dark);
/* ... other styles ... */
}
```
Solution
By default, list items have `display:block` which stacks them on top of each other. To have them listed next to each other, we can give them `display: inline-block`.
**CSS:**
```css
.programming-skill {
padding: 0.5rem;
border-radius: 8px;
display: inline-block; /* <-- add this */
background-color: var(--color-accent);
color: var(--color-light);
border: 1px solid var(--color-dark);
}
```
Try switching this to `display:inline` and see how it changes — notice how the padding behaves differently!
This is confusing and makes layout calculations difficult.
### The Solution: border-box reset
Add this to the **top** of your CSS file:
```css
* {
box-sizing: border-box;
}
/* Rest of your CSS below... */
```
The `*` selector targets all elements. This rule changes how `width` and `height` are calculated.
With `box-sizing: border-box`, `width` includes content, padding, AND border. Now your nav links are **exactly 10rem wide**:
* Padding: 32px
* Border: 4px
* Content: 124px (automatically calculated as 160-32-4)
* **Total: 160px (10rem)**
**Always include `box-sizing: border-box` at the top of your CSS. It makes layout predictable and matches how you naturally think about sizing.**
### General CSS Reset
Different browsers apply different default margins and paddings to elements like `body`, `h1`, `ul`, and `p`. This can cause inconsistent layouts across browsers.
A **CSS reset** removes these defaults, giving you a clean, predictable starting point. Add this to the top of every CSS file:
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width: 100%;
}
ul, ol {
list-style: none;
}
```
This reset:
* Removes all default margins and paddings
* Makes `width` and `height` include padding and border
* Makes images fill their container width by default
* Removes bullet points from lists (we'll add our own styling)
* Ensures consistent behavior across all browsers
You'll then add spacing intentionally where you need it, giving you full control over your layout.
## Organizing Your CSS
As your CSS file grows, it helps to organize your code into sections using comments. Here's a recommended structure:
```css
/* ================================
Base Styles: Color Palette (CSS Variables)
================================ */
:root {
--color-accent: royalblue;
--color-dark: midnightblue;
/* ... */
}
/* ================================
Base Styles: CSS Reset
================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ================================
Base Styles: Spacing
================================ */
header,
section,
main {
margin-bottom: 1rem;
}
/* ================================
Component: Header & Navigation
================================ */
header {
/* header styles */
}
nav>a {
/* nav link styles */
}
/* ================================
Component: Sections
================================ */
section {
/* section styles */
}
/* ... and so on ... */
```
This organization makes it easy to:
* Find specific styles quickly
* Understand the structure of your CSS
* Add new styles in the right place
* Debug issues faster
**TODO:** Take a moment to organize your CSS file using comment sections, then make adjustments to the padding and margins of the elements of your page until you are satisfied with the overall spacing.
## Test your Skills!
Head over to [MDN to test your box model skills](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Box_Model_Tasks)!
## Complete HTML & CSS
**index.html**
```html
Q: What is the actual width of a nav link?
You might expect each link to be 10rem (160px) wide. But the **actual width** is:
* Content: 160px
* Padding: 16px left + 16px right = 32px
* Border: 2px left + 2px right = 4px
* **Total width: 196px**
Ada Lovelace
Programming Skills
Developer Tools
JavaScript Skills
Web Development
Favorite Quotes