What is the Block and inline elements in HTML
2021-11-17 21:23 · 4 min read
Every element in HTML has a default display property which depends upon the element type.HTML (Hypertext Markup Language) elements historically were categorized as either "block-level" elements or "inline-level" elements. Block or inline is the default display value for most of the elements.
- Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content.
- A Block-level element occupies the entire space of the parent (container) such as <div>
Block elements
A block-level element always starts on a new line and stretches out to the left and right as far as it can.
Block-level element occupies the entire space of the parent (container) .
<div> and <p> tag are the best example of block Elements.
Common block-level elements: are <div>,<p>,<article>,<section>,<figure>,<footer> etc
<!DOCTYPE html>
<html>
<body>
<!-- Div element. -->
<div style="background-color:black;
color:white;
padding:20px;">
<h1>The Pro developer School</h1>
<h3>This is H3 heading and headings are also Block element.</h3>
</div>
</body>
</html>Inline Elements
HTML Inline elements are the opposite of the block elements. They do not start on a new line and take full width.
Inline as the name says “included as a part of the main text and not as a separate section
Inline elements occupy the space as needed within the space defined by the main element
Common Inline-level elements: are <a>,<span>,<img>,<code>,<cite>,<button>,<input>etc.
<!DOCTYPE html>
<html>
<style>
.highlight{
color: green;
}
</style>
<body>
<h2>We use span element to <span class="highlight">highlight</span>
text portion because span is inline element and don't break heading</h2>
</body>
</html>Changing element display levels using CSS
You can change from display block level to Inline and Inline to block by using CSS display Property. For Example, by changing the value of display from "inline" to "block", you can tell the browser to render the inline element in a block box rather than an inline box, and vice versa. However, doing this will not change the category and the content model of the element. For example, even if the display of the span element is changed to "block", it still would not allow nesting a div element inside it.
div{
display: inline;
}
span{
display: block;
}