Block and Inline elements

170 views 4 months ago HTML

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.

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]