CSS Spans, Divs and Other Features

In CSS a div or a division separates the contents into small sections. When the contents are divided, then each section can be formatted in a different way. That could then be applied to all sections of the site. Here is a sample code:


This is a DIV sample.

The CSS Span

CSS spans are somewhat similar. A span would work in the same way that div does wherein it divides the content into sections. The difference is that a span can be used on finer levels. It can be used for example in order to format even individual characters or single letters within a content of a page. Another crucial difference between a div and a span is the fact that there is no line feed after a span. Here is a sample code for a span:

this is a span

It is useful in applying different styles to certain sections. If you want to give emphasis to a certain section of the text for example then you can use a span to highlight it or in order to use bold fonts on it. Here is another example of how to use span:

The text is italic

On your CSS file, you can then put in this code:

.italic{ 
  font-style: italic; 
}

The result should look like this:

The text is italic

Using CSS Margins

The purpose of the margin property in CSS is to define the space between the elements and the border or any other element that is surrounding it. Because of this, the margin property is very important property to learn if your website is to look right. You have three options that you can choose from when you are setting the value of the property. These are the following:

    • length
    • percentage
    • auto

 

There is also a shorthand way of defining the property. Here is an example of that shorthand method:

margin: 12px 12px 12px 12px;

You can also declare it to be: margin: 12px; , since that would automatically set all sides to have a length of 12 pixels. It is possible to set the margin value to 0 and if you do not set it, then it reverts to the default value which is 0. Sometimes there are browsers that have set values for margins. You can override that by setting the margin to 0.

Using CSS Paddings

The padding is different from the margin. The padding is the distance between the element and the border that surrounds it. The same rules that are used for margins would apply to padding as well, except for two notable exceptions. The first one is that you cannot set negative values, another one is that there is no auto value for it.

You have two options when it comes to the padding property. These are length and percentage. Finally there is shorthand that you can use in order to set the padding property. That would save you a great deal of time.