HTML Block Elements and Inline Elements
HTML elements are usually block lvel elements or inline elements.A block-level element occupies the entire space of its parent element (container), thereby creating a "block." An inline element occupies only the space bounded by the tags that define the inline element.
Block Elements
Block-level elements may appear only within a <body> element. Block level elements may contain inline elements and other block level elements.Block level elements normally start and end with a new line, when displayed in a browser.
The HTML <div> element is a block level element that can be used as a container for other HTML elements.
The following are some block elements
table,blockquote,dd,dl,form,h1-h6,p,pre
Inline Elements
Inline elements may contain only data and other inline elements.An inline element occupies only the space bounded by the tags that define the inline element.
The HTML <span> element is an inline element that can be used as a container for text.
The following are some inline elements
a, bdo, br, img, map, object, q, script, span, sub, sup
<!DOCTYPE html>
<html>
<head>
<title>Block vs Inline</title>
</head>
<body>
<div style="background-color:red; color:white; margin:20px; padding:20px;">
<h2>Block vs Inline</h2>
<p>
<span style="color:blue">A block-level element</span> occupies the entire space of its parent element (container), thereby creating a "block."<span style="color:green"> An inline element</span> occupies only the space bounded by the tags that define the inline element.
</p>
</div>
</body>
</html>
Output
Block vs Inline
Block vs Inline
A block-level element occupies the entire space of its parent element (container), thereby creating a "block." An inline element occupies only the space bounded by the tags that define the inline element.
0 Comment "HTML Block Elements and Inline Elements"
Post a Comment