Paragraphs create layout spacing primarily through a built-in mechanism called Default User-Agent Styles.
When a browser (like Chrome, Firefox, or Edge) reads a <p> tag, it automatically applies a small amount of space around it. Here is how that works:
1. Default Margins
Browsers treat the <p> tag as a block-level element. This means it always starts on a new line and takes up the full width available. Most browsers automatically add a standard top and bottom margin (usually about 1em or 16px).
This "empty space" is what separates one paragraph from the heading above it and the paragraph below it.
2. The "Box Model" Concept
In web development, every element is considered a "box." A paragraph box consists of:
- Content: The actual text.
- Padding: Space inside the box around the text.
- Border: A line around the padding (usually invisible).
- Margin: Space outside the box that pushes other elements away.
The "layout spacing" you see is the Margin.
3. Visual Example
If you write:
<h1>Title</h1>
<p>First paragraph.</p>
<p>Second paragraph.</p>
The browser renders it like this:
- [Title]
- (Automatic Gap)
- [First paragraph]
- (Automatic Gap)
- [Second paragraph]
Why is this useful?
- Automatic Formatting: You don't have to manually add "empty lines" to make your text look readable; the HTML tag does the work for you.
- Clean Design: It prevents text from "clumping" together, which is essential for a good user experience.
In later lessons, you will learn how to use CSS to change this spacing, but for now, the <p> tag provides a great default layout! If you look at your Web 8080 tab now, you'll see that clear gap between your heading and your text.
