Divisions are (X)HTML block-level elements that define sections of an (X)HTML file. A single division could hold all parts of your website, such as images, spans, text, other divisions, and so on.

A division could be set within an (X)HTML file by inserting the following inside the tags:
<div>
Site contents go here
</div>

You would probably like to enhance this further. You could use the following code:
<div id=”container”>
Site contents go here
</div>

Part of the CSS file will appear like this:
#container{
width: 70%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}

The “container” style rule will now style everything inside the specified division according to the author’s setting in the CSS file. By default, a division generates a default line break. Either a class or an ID with a division tag could be used to design sections of your website.

Spans
Spans, although similar with divisions, are actually inline elements. A declared span does not generate a line break.

The span tag could be used to style some portions of text:
<span class=”italic”>This text is italic</span>

So that the CSS file would look like this:
.italic{
font-style: italic;
}

Padding
The measure of space between an (X)HTML element’s border and the content inside is usually referred to as the padding.

Almost all rules for margins could also be applied to padding except for an “auto” value. Paddings also do not support negative values.
padding-top: length percentage;
padding-left: length percentage;
padding-right: length percentage;
padding-bottom: length percentage;

As shown in the given example, the two values that could determine padding property are: length and percentage.

An element could also be affixed with a padding using only one property:
padding: 10px 10px 10px 10px;

Declaring four values such as in the example above requires the following logical arrangement:
1. top
2. right
3. bottom
4. left

If you declare only one value, it would automatically apply equal padding on all sides:
padding: 10px;

If two or three values are declared, the undeclared values will take after the opposite side:
padding: 10px 10px; /* 2 values */
padding: 10px 10px 10px; /* 3 values */

The padding will be set to zero by default if you fail to specify a padding value. Note: There is no need to add pixels (px) or any other unit if you declare a zero value.

In the following example, this site’s main container stands at 30px of padding between the border and text.
#container{
width: 70%;
margin: auto;
padding: 30px;
border: 1px solid #666;
background: #ffffff;
}

Tags: CSS Division Invasion