HTML Block And Inline Elements

admin_img Posted By Bajarangi soft , Posted On 09-10-2020

Every element in HTML has a default display value which depends upon the element type. Block or inline are the default display value for the most of the elements.

Block And Inline Elements

Block Level Elements: A block-level element always starts on a new line and stretches out to the left and right as far as it can.
div element: The div element is used as a container for other HTML elements. It has no required attributes. Styleclass and id are the commonly used attributes.

Syntax

<div>GFG</div>
Example-1:
<!DOCTYPE html>
<html>

<body>
<style>
    body {
        text-align: center;
    }

    h1 {
        color: #ad10a5;
    }
</style>

<!-- Div element. -->
<div style="background-color:#e37070;
            color:white;
            padding:20px;">

    <h1>Bajarangi Soft</h1>

    <h3>Bajarangi  Soft is providing a Web designing  courses.</h3>

    <h3>You can give reviews as well as
        contribute posts on this portal.</h3>

</div>

</body>

</html>
Inline Elements:
 An inline element is the opposite of the block-level element. It does not start on a new line and takes up only necessary width.
span element: The span element is used as a container for text. It has no required attributes. Style, class and id are the commonly used attributes.

Syntax:
<span>GFG</span>
Example-2:
<!DOCTYPE html>
<html>
<style>
    body {
        text-align: center;
    }

    h1 {
        color: #f3a113;
    }
</style>

<body>

<!-- Sapn element. -->
<h1>Bajarangi <span style="color:red">
   for</span>soft</h1>

</body>

</html>
 

 

Related Post