<div> and <span> are both HTML container elements, but they differ in display behavior and usage.
1️⃣ <div>
- Block-level element
- Takes full width of its container.
- Starts on a new line.
- Used to group larger sections of content.
- Can contain other block or inline elements.
Example:
<div style="background: lightblue; padding: 10px;">
<h2>Section Title</h2>
<p>This is a paragraph inside a div.</p>
</div>
- Useful for layout and structure.
2️⃣ <span>
- Inline element
- Only takes as much width as its content.
- Does not start on a new line.
- Used to style or target small parts of text or inline content.
Example:
<p>Hello, <span style="color: red;">world!</span> How are you?</p>
- Useful for styling a few words or adding inline scripts.
🔹 Key Differences
| Feature | <div> |
<span> |
|---|---|---|
| Display type | Block | Inline |
| Starts on new line | Yes | No |
| Usage | Layout, sections | Styling text/inline |
| Can contain | Block & inline elements | Only inline elements |
💡 In Short:
<div>→ block container for structural/layout purposes<span>→ inline container for small styling or scripting purposes
