Table of Content (toc)

left-sidebar

Depending on the type of element it is, every HTML element has a default
display value.

Block and inline are the two display settings available.

Elements at Block Level

A block-level element always begins on a new line, and browsers add a margin
(a space) before and after the element by default.

A block-level element always occupies the entire available width (stretches
out to the left and right as far as it can).

<p> and
<div> are two often used
block components.

In an HTML document, a paragraph is defined by the
<p> element.

In an HTML document, the
<div> element designates a
part or division.

Example :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Counting Control Lists</title>
</head>
<body>

    <p style="border: 1px solid red;">The P element is a block-level element.</p>
    <div style="border: 1px solid red">The DIV element is a block-level element.</div>

    <p>Both the P and the DIV elements are block elements; as such, they always begin on a new line and occupy the entire available width (stretches out to the left and right as far as it can).</p>

</body>

</html>

Run Code (demo)

The HTML block-level elements are listed as follows:

<address> <article> <aside> <blockquote> <canvas> <dd> <div>

<dl> <dt> <fieldset> <figcaption> <figure> <footer> <form>

<h1>-<h6> <header> <hr> <li> <main> <nav> <noscript>

<ol> <p> <pre> <section> <table> <tfoot> <ul>

<video>

Elements inline

A line break is not used to begin an inline element.

An inline element only uses the space that is required.

Example :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Inline Elements</title>
</head>
<body>

    <p>This is a paragraph's inline span <span style="border: 1px solid red">Hello World</span> element.</p>

    <p>Being an inline element, the SPAN tag only occupies the space that is required and won't begin on a new line.</p>

</body>

</html>

Run Code (demo)

The HTML inline components are as follows:

<a> <abbr> <acronym> <b> <bdo> <big> <br>
<button> <cite> <code> <dfn> <em> <i> <img>
<input> <kbd> <label> <map> <object> <output> <q>
<samp> <script> <select> <small> <span> <strong> <sub>
<sup> <textarea> <time> <tt> <var>

Note : A block-level element cannot be included by an inline element!

MR STAR EDIT

Rate this post

Categorized in: