Lesson 15: HTML Block & Inline

Understanding Display Types

Every HTML element has a default display value: Block (starts on a new line and takes full width) or Inline (does not start on a new line and takes only needed width).

<div>Block Element</div><span>Inline Element</span>

Why&How to use:

Block elements build primary layout structures, while inline elements style or manipulate specific text parts within block containers.

			
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Block and Inline</title>
</head>
<body>
    <div style="background-color: lightgreen;">This div is a block element stretching full width.</div>
    <p>This is <span style="background-color: yellow;">inline text</span> inside a paragraph.</p>
</body>
</html>

		