Block and Inline elements

Every element in HTML has display level. There are two types of display level which decide how it will display in browser.

  • Block-level elements
  • Inline elements

Block-level Elements

Block-level elements always occupy full width in the browser. So new elements always starts with new line in browser.

Example:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        p {
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>This is block level element and occupy full width.</p>
    <p>This is also block level element and will start on new line.</p>
</body>
</html>

The below is a list of few block-level elements.

All headings <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Paragraph <p>
<nav>, <form>, <table>
<ul>, <ol>, <li>, <div> etc.

Inline elements

Inline element doesn't starts from new line. It always start with left side of the document and only takes space as it require.

Below in example, span and a elements are inline elements.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        span {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>This is block level element and <span>this is inline element.</span> The inline element <a href="#">starts from the left</a> side of element.</div>
</body>
</html>

The below is a list of few inline elements.

<span>
<a>, <button>, <img>,
<input>, <select>, <textarea>,
<b>, <i>, <em>, <code>, <strong>
Tags: