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 :
<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 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 Element
- 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 Element
- 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:
More topic in HTML
