We’ll start with what you could call the fundamental properties and capabilities of CSS, ones that we commonly use to build CSS-based websites:

Once you are comfortable with the basics, we will kick it up a notch with some neat tricks to build your CSS website from scratch and make some enhancements to it.

Most beginners get padding and margins mixed up and use them incorrectly. Practices such as using the height to create padding or margins also lead to bugs and inconsistencies. Understanding padding and margins is fundamental to using CSS.

Padding is the inner space of an element, and margin is the outer space of an element.

The difference becomes clear once you apply backgrounds and borders to an element. Unlike padding, margins are not covered by either the background or border because they are the space outside of the actual element.

Take a look at the visual below:

 

Margin and padding values are set clockwise, starting from the top.

Practical example: Here is an <h2> heading between two paragraphs. As you can see, the margin creates white space between the paragraphs, and the padding (where you see the background gray color) gives it some breathing room.

In the above example of the heading, the values for the margin and padding would be:

margin: 15px 0 15px 0;
padding: 15px 15px 15px 15px;

To optimize this line of code further, we use an optimization technique called “shorthand,” which cuts down on repetitive code. Applying the shorthand technique would slim the code down to this:

margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/

Here is what the complete CSS would look like for this heading:

h2 {
background: #f0f0f0;
border: 1px solid #ddd;
margin: 15px 0;
padding: 15px;
}

Keep in mind that padding adds to the total width of your element. For example, if you had specified that the element should be 100 pixels wide, and you had a left and right padding of 10 pixels, then you would end up with 120 pixels in total.

100px (content) + 10px (left padding) + 10px (right padding) = 120px (total width of element)

Margin, however, expands the box model but does not directly affect the element itself. This tip is especially handy when lining up columns in a layout!

Additional resources:

2. Floats

You can correct this issue in one of two ways:

1. Reverse the order of the HTML markup so that you call the floated element first, and the neighboring element second.

 

 

 

 

1. Specify an exact width for the neighboring element so that when the two elements sit side by side, their combined width is less than or equal to the width of their parent container.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Internet Explorer 6 (IE6) has been known to double a floated element’s margin. So, what you originally specified as a 5-pixel margin becomes 10 pixels in IE6.

A simple trick to get around this bug is to add display: inline to your floated element, like so:

.floated_element {
float: left;
width: 200px;
margin: 5px;
display: inline; /*--IE6 workaround--*/
} 

Additional resources:

1. Floatutorial
2. Clearing Floats
3. CSS Float Theory: Things You Should Know
4. CSS-Tricks: All About Floats
5. Containing Floats
6. W3Schools: Clear
7. W3Schools: Float

3. Center Alignment

Horizontal Alignment

.center {
text-align: center;
display: block; /*--For inline elements only--*/
}

.layout_container {
margin: 0 auto;
width: 960px;
}

img.center {
margin: 0 auto;
display: block; /*--Since IMG is an inline element--*/
}

Vertical Alignment

h1 {
font-size: 3em;
height: 100px;
line-height: 100px;
}

 

.vertical {
width: 600px; /*--Specify Width--*/
height: 300px; /*--Specify Height--*/
position: absolute; /*--Set positioning to absolute--*/
top: 50%; /*--Set top coordinate to 50%--*/
left: 50%; /*--Set left coordinate to 50%--*/
margin: -150px 0 0 -300px; /*--Set negative top/left margin--*/
}

1. Vertical Centering With CSS
2. Centering Things
3. CSS Centering 101
4. CSS Centering: Fun for All!
5. Two Simple Ways to Vertically Align with CSS