📚 Learning Objectives: Understand Normal Flow, differentiate between block and inline elements, know when to use divs and spans, apply display properties effectively
🌊 Normal Flow
Definition
Normal flow is _________________________________________
_________________________________________
Key Concepts of Normal Flow
- Elements render in _________________ order
- Block elements stack _________________
- Inline elements flow _________________
- No _________________ unless positioned
🎨 The Display Property
Common Display Values
/* Fill in what each does: */
display: ________; /* Elements stack vertically */
display: ________; /* Elements flow horizontally */
display: ________; /* Best of both worlds */
display: ________; /* Hides the element completely */
display: flex; /* Coming next lesson! */
📦 Block Elements
Characteristics (Check all that apply)
- ☐ Start on a new line
- ☐ Take up full width available
- ☐ Stack vertically
- ☐ Can have width and height set
- ☐ All margin/padding sides work
- ☐ Flow with text content
- ☐ Only take necessary space
Common Block Elements
| Category |
Elements (List 3-4) |
| Structural |
_________________________________________ |
| Headings |
_________________________________________ |
| Content |
_________________________________________ |
| Lists |
_________________________________________ |
Draw how these block elements would display:
<div>First Block</div>
<p>Second Block</p>
<h3>Third Block</h3>
➡️ Inline Elements
Characteristics (Check all that apply)
- ☐ Start on a new line
- ☐ Take up full width available
- ☐ Stack vertically
- ☐ Can have width and height set
- ☐ All margin/padding sides work
- ☐ Flow with text content
- ☐ Only take necessary space
Common Inline Elements
List 6 inline elements:
- _________________
- _________________
- _________________
- _________________
- _________________
- _________________
⚠️ Warning: Vertical padding/margin on inline elements
_________________________________________
⚖️ Block vs Inline Comparison
| Property |
Block |
Inline |
| Line breaks? |
_________________ |
_________________ |
| Default width |
_________________ |
_________________ |
| Can set width/height? |
_________________ |
_________________ |
| Vertical margin/padding |
_________________ |
_________________ |
🎯 Inline-Block: The Middle Ground
Inline-block elements combine features of both:
- From inline: _________________________________________
- From block: _________________________________________
/* When would you use inline-block? */
.navigation-item {
display: ________________;
padding: 10px 20px; /* Why does this work now? */
margin: 5px; /* _________________________ */
}
📦 Generic Containers: Divs and Spans
| Property |
<div> |
<span> |
| Default display |
_________________ |
_________________ |
| Semantic meaning |
_________________ |
_________________ |
| Common use |
_________________________ |
_________________________ |
Best Practice: Always use semantic HTML first! Only use div/span when
_________________________________________
💻 Practice Problems
1. Identify the Display Type
Write 'block', 'inline', or 'inline-block' for each scenario:
- Navigation links that sit side-by-side: _________________
- Main content container: _________________
- Bold text within a paragraph: _________________
- Cards in a horizontal layout: _________________
- Page header: _________________
2. Fix the CSS
/* This inline element needs vertical spacing. How do you fix it? */
span.badge {
_______________________
padding: 10px 15px;
margin: 10px 5px;
}
3. Predict the Output
How many lines will this render on?
<div>Line 1</div>
<span>Line 2</span>
<span>Line 3</span>
<div>Line 4</div>
Answer: _______ lines
Explanation: _________________________________________
📋 Quick Reference
Changing Display Property
/* Override any element's default display */
.make-block { display: block; }
.make-inline { display: inline; }
.make-inline-block { display: inline-block; }
.hide-element { display: none; }
Common Gotchas to Remember
- Inline elements with vertical padding: _________________________
- Gaps between inline-blocks caused by: _________________
- To center inline elements: _________________________
- To center block elements: _________________________
📚 Homework
Part 1: CSS Exercises
Complete from The Odin Project repository:
- ☐ 01-margin-and-padding-1
- ☐ 02-margin-and-padding-2
Repository: TheOdinProject/css-exercises/foundations/block-and-inline
Part 2: Style Your Recipe Page
- ☐ Add external CSS file
- ☐ Practice with display properties
- ☐ Experiment with colors and typography
Resources to Review
- ☐ MDN: Normal Flow
- ☐ W3Schools: HTML Block and Inline Elements
- ☐ Digital Ocean: Inline vs Inline-block Display
📝 Additional Notes
Use this space for any additional notes during the lecture: