CSS: Box Model
Overview
CSS Box Model is a box that wraps around every element. From the inside out the model defines for rendering the content, padding, border, and finally margin.
"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
- Watch: ► The Box Model - (5:19 mins, The Box Model Transcript)
- Read: 📄 Box Sizing: Border Box
The CSS Box Model
The box model can be applied to HTML elements that or 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 |
|
|
|
|
|
|
|
|
| Common Border Shorthand |
|---|
This applies a 1 pixel border around the element with a solid line and a color that will be a 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. - Copy the HTML from the HTML section of this CodePen into box-model.html
file.
You will have to add the minimum HTML structure to make this work. ⚙️ CodePen - Box Model Start
CSS
- Copy the CSS selectors from the CSS section of this 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 
Screenshot of Example Solution
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 that you may have not used these in your design. Refactoring work as you discover new elements and methods is part of the overall application process.
Optional Solution Discussion
- Watch: ► Demonstration of completed activity - (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 and post your link on MS Teams.