CSS Div and CSS Span

Div

Div (short for division) divides the content into individual sections. Each section can then have its own formatting, as specified by the CSS. Div is a block-level container, meaning that there is a line feed after the </div> tag.

For example, if we have the following CSS declaration:

.large {   color: #00FF00;   font-family:arial;   font-size: 4pt; }

The HTML code

<div class="large">   This is a DIV sample. </div>

gets displayed as

This is a DIV sample.

Span

Span is similar to div in that they both divide the content into individual sections. The difference is that span goes into a finer level, so we can span to format a single character if needed. There is no line feed after the </span> tag.

For example, if we have the following CSS declaration:

.largefont {   color: #0066FF;   font-family:arial;   font-size: 6px; }

The HTML code

Span is not at the <span class="largefont">block level</span>.

gets displayed as

Span is not at the block level.