HTML Block & Inline
- An element at the block level always begins on a new line, and browsers automatically leave a margin (space) before and after the element.
- An element at the block level always occupies the entire width that is available, extending to the left and right as possible.
HTML are used two common block elements like:
<p> - In
HTML document, a paragraph is defined by the <p> element.
<div> - In HTML document, a division or section is defined by the <div> element.
<div> - In HTML document, a division or section is defined by the <div> element.
Example:
<!DOCTYPE
html>
<html>
<body>
<h1> HTML Block and
Inline</h1>
<p
style ="border: 1px solid black">Hello
World</p>
<div
style ="border: 1px solid black">Hello
World</div>
<p>An element at the
block level always begins on a new line, and browsers automatically
leave a margin (space) before and after the element. An element at the
block level always occupies the entire width that is available,
extending to the left and right as possible.</p>
</body>
</html>
Output:
HTML Inline Elements:
- A line segment that is inline does not begin on a new one.
- An inline element only uses the minimum amount of width.
Syntax:
<span>My World</span>
Example:
<!DOCTYPE
html>
<html>
<body>
<h2>Inline
Elements</h2>
<p>This is a inline
span <span
style ="border: 1px solid black">My
World</span> element inside a paragraph.</p>
</body>
</html>
Output:
HTML Block Elements:
- In Block elements are used to take up the whole space available in its container.
- A inline element only takes up as much width as necessary.
- Block elements are supported with <p>, <div> , <h1>, <figure> etc...
Syntax:
<div>My world</div>
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Block
Element</h2>
<div
style ="background-color: black; color: white; padding: 20px;">
<p>In Block
elements are used to take up the whole space available in its
container.
An inline element only takes up as much width as
necessary.</p>
</div>
</body>
</html>
Output:
