Block vs Inline Element

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Block vs Inline</title>
        <style>
            .block {
                padding: 10px;
                background-color: cyan;
            }

            span {
                background-color: yellow;
                color: red;
            }
        </style>
    </head>
    <body>
        <p class="block">
            This is p element. It is a block level element. It will take up the full width
        </p>

        <p>
            This is another p element. But I can put inline-level element like <span>span</span>. Since span is an <u>inline-level element</u>, it will go no where. It is still where it is.
        </p>
    </body>
</html>