Be able to apply spacing including paragraph (before and after) and line

📚 Topic 14: Styles – Spacing in CSS

1️⃣ Paragraph Spacing (Margin & Padding)

Think of a paragraph as a person at a party. Margin is the personal space they keep from others, while padding is the cushion inside their own space. By adjusting these, you control how close or far a paragraph sits from the page edges and from other elements.

2️⃣ Line Spacing (Line-Height)

Line-height is like the height of a step in a staircase. If the step is too tall, the steps look spaced out; if too short, they feel cramped. Adjusting line-height makes text easier to read.

3️⃣ Using CSS Shorthand for Spacing

CSS allows you to write spacing in a compact form. The order follows the clock: top, right, bottom, left.

4️⃣ Practical Example: A Blog Post Layout

HTML:
<article>
<h2>My First Blog Post</h2>
<p>Lorem ipsum dolor sit amet...</p>
<p>More content here...</p>
</article>

CSS:
article { padding: 20px; background:#ecf0f1; }
article h2 { margin-bottom: 15px; }
article p { margin-top: 10px; margin-bottom: 10px; line-height: 1.5; }

5️⃣ Quick Reference Cheat Sheet