Flexible Block and Inline elements

Tweet

HTML elements are structured into two kinds, which are block elements and inline elements. Block elements contain elements like paragraph, headings, lists, etc... which are in a seperate block. Inline elements are like emphasis, strong, bold elements which can be inside a block or can act separate too.

There are actually certain characteristics for block and inline elements that we must understand.

Block-level Characteristics

1. Will always start below the previous element, by default.
2. Ignores vertical-align property.
3. Parent container's width will be set by default.

Inline element characteristics

1. It flows normally.
2. They don't have width and height property.
3. They do not have top and bottom margin, but can apply left and right margins and also apply any padding.
4. If an inline element is floated to right or left, it will be subjected to a block-level element property.
5. If fits inside a block element.
6. It can contain only another inline element.

But these block and inline element tags that is mentioned above cannot be used in all cases because, the tags are used for a certain functionalities. So, HTML has a flexible inline and block level elements called,

1. DIV element
2. SPAN element

Using div element

<div id="header">
<!-- some code missing -->
</div>

<div id="content">
<!-- some code missing -- >
</div>

<div id="sidebar">
<!-- some code missing -- >
</div>

<div id="footer">
<!-- some code missing -- >
</div>

The div element has the characteristics of a block-level element. Here, the difference between other block-level elements is that it don't imply any functionality to its elements. It is highly useful only when applying CSS to it.

Using span element

<div class="content">

  <!-- some texts missing -->
    <span><a href=" ... "> ... </a></span>
  <!-- some texts missing -->

  <!-- some texts missing -->
    <span><a href=" ... "> ... </a></span>
  <!-- some texts missing -->

</div>

<span><a href=" ... "> ... </a></span>

<span><a href=" ... "> ... </a></span>

As div has a block element characteristics, span can be used as an inline element within or outside block level elements.