Introduction
In this blog, we will be diving into the concept of block and inline elements in HTML. Before HTML5, HTML elements were either block or inline elements.
Under the traditional content model structure, all elements fall into two categories: block or inline. Block elements render on the new line by default. This is reversed for inline elements, which default render on the same line.
Block Elements in HTML
Block elements render on the new line by default. A Block-level element occupies the whole width of its container or, in other words, the entire horizontal space of its parent element.
Some of the used block elements are:
<article> <div> <figure> <form> <h1> <h2> <h3> <h4> <h5> <h6> <header> <li> <main> <nav><ol> <p> <pre> <section> <table> <ul>The two commonly used block elements are <p> and <div>. The <p> element defines a paragraph. The <div> element defines a division. Let's take an example and see how these block-level elements work.
Program 1
<html>
<style>
.mark {
background-color: #fff300;
color: black;
}
</style>
<head>
<title>Block-level elements</title>
</head>
<body>
<div>
The given below is a <p class="mark">block-level element</p> does not matter how much the content is in the block-level element. It takes the whole width of the container.
</div>
</body>
</html>Output
You can observe that the text in between the <p> element appears on the new line irrespective of the tag in which it is enclosed.
Program 2
<html>
<style>
html {
font-size: 30px;
}
.highlight1 {
background-color: #61a916;
color: white;
padding-left: 0.7em;
}
.highlight2 {
background-color: #1aa1e3;
color: white;
padding-left: 0.7em;
}
.highlight3 {
background-color: #6a00ff;
color: white;
padding-left: 0.7em;
}
.highlight4 {
background-color: #a20125;
color: white;
padding-left: 0.7em;
}
</style>
<head>
<title>Block elements</title>
</head>
<body>
<p class="highlight1" align="center">Content 1</p>
<p class="highlight2" align="center">Content 2</p>
<p class="highlight3" align="center">Content 3</p>
<p class="highlight4" align="center">Content 4</p>
</body>
</html>
Output
568+ registered 
