CSS: Box Model
Overview
The CSS Box Model is a box that wraps around every element. From the inside out, the model defines how the content, padding, border, and margin are rendered.
"When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model. CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes." - MDN
Prepare
- Video Demonstration: ▶️ The Box Model | (5:19 mins, Transcript)
- Read: Box Sizing: Border Box
The CSS Box Model
The box model can be applied to HTML elements that are block-level, table, or inline-block.
- Content: This is where the text and images appear.
- Padding: This is the area around the content and separates the content from the border.
- Border: The border goes around the padding and separates the padding from the margin.
- Margin: This the the area outside of the border and can extend beyond the physical characters of the box model.
CSS Shorthand Notation
CSS shorthand notation is generally considered best practice for conciseness, readability, and performance. However, longhand notation has its uses and can be more appropriate in certain situations where specificity is needed.
Summary: CSS Shorthand Declarations using the margin property | |
---|---|
Longhand | Shorthand |
|
|
|
The right and left
margins are the same at 20 pixels.
|
|
The top and bottom are the
same (10 pixels) and right and left margins are the same (20 pixels).
|
|
All sides of the margin are the same 10
pixels.
|
Common Border Shorthand |
---|
This applies a 1 pixel border around the element with a solid line and a color that match the background of the containing/parent element. The color is set to 10% opacity. |
Activity Instructions
File Setup
- In the week02 folder, create a file named "box-model.html".
- Add a folder named styles and put a CSS file named
"box-model.css" in that folder.
At this point in the course, setting up the folders and files to complete activities and assignments should be a common task where you need little direction.
HTML
- Link to the CSS in your HTML document using the
<link>
tag.
Make sure this link element is located within the<head>
section.Check Your Understanding
<link rel="stylesheet" href="styles/box-model.css">
- Copy the HTML from the HTML section of the following CodePen into your box-model.html
file.
You will have to add the minimum HTML outer structure to make this work. CodePen - Box Model Start
CSS
- Now copy the CSS selectors from the CSS section of the given CodePen into box-model.css file.
- Use the CSS selectors to style the HTML elements to match the image below using box model
concepts for the .callout class, img, blockquote, and cite elements. The following summary
of declarations is your guide:
Element Required CSS Declarations callout class maximum width, margin, border, padding, background color, and text color image position (float), margin, border, padding, background color, width, height blockquote margin cite display, top border, top padding, text alignment, size of font
Check Your Understanding
CodePen - Box Model Activity - Example Solution
Did you notice the semantic HTML used to encase the actual scripture and scripture reference?
<blockquote>
was used versus a <div>
or <p>
and
the reference was encased with a <cite>
element. There is nothing special about these
elements except their semantic names and maybe, default styling by the browser. Otherwise they behave and look
like any other element.
Do not worry if you did not use these in your design. Refactoring work as you discover new elements and methods is part of the overall development process.
Optional Solution Discussion
- Video Demonstration: ▶️ Activity Walkthrough | (20:00 mins)
Testing
- Test your page in your local browser using Live Server.
- You can commit and sync up your work to your
wdd130
GitHub Pages enabled repository so that others may review your work, especially if you have questions. Post your link on Microsoft Teams.