Inline and block elements¶

Tags in HTML can be divided into two types, which are distinguished by the amount of space occupied by default on the displayed website. These types are

• inline elements

• block elements.

Inline elements¶

Inline elements are those that behave like line of text. They take up as much space as their content. In addition:

*You cannot determine their dimensions with the width and height properties. * You cannot specify the upper and lower margin. * Each inline element is positioned next to the other.

Examples of inline tags are <a> and <span>.

<section>
    <p>
        <span>This is some text</span>
        <span>This is even more text</span>
    </p>

    <p>
        <a href="https://sdacademy.dev/">SDA</a>
        <a href="https://sdacademy.dev/blog/">blog SDA</a>
    </p>
</section>

Block elements¶

Block elements are those that are displayed as blocks on the page. By default, they occupy 100% of the width of your parent. In addition:

You can specify their dimensions with the width and height properties. * You can specify all (four) margins. * Each block element is placed one under* another.

Examples of block tags are <p>, <div>.

<section>
    <div>
        <p>First Paragraph</p>
        <p>Second paragraph</p>
    </div>
    <div>
        <p>p in second div</p>
        <p>second p in second div</p>
    </div>
</section>