inline and block elements

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline and Block elements</title>
</head>

<body>
    <p style="border: 2px solid red;">This is a paragraph</p>
    <p style="border: 2px solid blue;">This is also a paragraph</p>
    <!-- paragraph is a block element islie vo saari jagah leleta h aur next para next line se start hota h  -->
    <span style="border: 2px solid red;">This is a span</span>
    <span style="border: 2px solid blue;">This is also a span</span>
    <!-- on the other hand span is an inline element, agar hm para ki jgh span use kre to vo sara ek hi line me aaega  -->

    <!-- border lgane pr para element ne puri jgh pr border lgaya kyuki vo ek block element h aur span element ne sirf utte pr hi lgaya jitna likha hua h kyuki vo ek inline element h  -->

    <div style="border: 2px solid red;">this is div</div>
    <div style="border: 2px solid blue;">this is also a div</div>
    <strong style="border: 2px solid red;">this is strong</strong>
    <a style="border: 2px solid red;">this is anchor element</a>
    <!-- similarly div is block elem and strong,a are inline element  -->
    <li style="border: 2px solid red;">this is a list item</li>
    <em style="border: 2px solid red;">this is emphasised</em><br>
    <img src="https://source.unsplash.com/200x200/?nature,water" style="border: 2px solid blue;">
</body>

</html>

Comments

Popular posts from this blog

css tutorial

css selectors

developer tools