Elements in HTML are often divided into two categories according to how the browser displays them: inline elements and block-level elements.
Block-level Elements:
- Block-level elements take up the full width available and start on a new line.
Behavior:
- Always start on a new line.
- Can contain other block-level elements or inline elements.
- CSS may be used to explicitly set width and height.
Inline-Elements:
- Inline elements only take up as much width as necessary and do not start on a new line.
Behavior:
- Do not start on a new line; they appear within the same line as other inline elements.
- Cannot contain block-level elements (only other inline elements or text).
- Width and height cannot be set directly (without changing their display property).
Block Level Elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Inline vs Block Level Elements(by rsportfolio)</title>
</head>
<body>
<h2>Block Level Elements</h2>
<hr />
<div>This is a div (block-level)</div>
<p>This is a paragraph (block-level)</p>
<h1>This is a heading (block-level)</h1>
<section>This is a section</section>
<ul>
<li>List item</li>
</ul>
</body>
</html>
Output:
Inline Elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Inline Elements(by rsportfolio)</title>
</head>
<body>
<h2>Inline Elements</h2>
<hr />
<span>This is a span (inline)</span>
<a href="#">This is a link</a>
<strong>Bold text</strong>
<em>Italic text</em>
<img src="devi.png" alt="Image" style="height: 200px; width: 200px" />
</body>
</html>
Output:
How to Change Displaying:
<body>
<h2>How to Change Displaying?</h2>
<hr />
<!-- Span is inline element, if we want it acts like block then change display property to Block-->
<span style="display: block; border: 1px solid red"
>Span is inline element, if we want it acts like block then change display
property to Block</span
>
<br />
<div style="display: inline; border: 2px solid green">
Div tag is Block level Element, if we want it act as a inline then change
display property to Inline
</div>
Output:
