Creating CSS cascading style sheets for HTML
Part four of a seven-part series of blogs

This is the first of a series of 3 tutorials showing how to create and use CSS style sheets for HTML web pages. This first part explains how CSS works, a second part shows how to create styles for HTML tags and a final part gives a full worked example of creating a style sheet.

  1. An Introduction to CSS Style Sheets
  2. The 3 Types of Style: Element, Class and Tag
  3. CSS Style Inheritance
  4. Margins and Padding in CSS (this blog)
  5. Measurement Units for CSS Styles
  6. Colours in CSS Style Sheets
  7. Float Styles

This blog is part of a larger online ASP.NET online tutorial series.  For training courses for businesses, have a look at our Visual Basic or Visual C# courses.

Posted by Andy Brown on 16 May 2012

You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

Margins and Padding in CSS

Layout of HTML is controlled by two vital concepts: margins and padding

If you write HTML within Visual Studio, you may find it useful to choose View --> Visual Aids --> Margins and Padding, which will reveal any margins and padding you have set on screen in design view.

Browser Independence

It is sad, but true, that not all browsers render padding and margin in exactly the same way.  If you stick to the principles outlined in this blog you won’t go far wrong, but you should always test your website in (at a minimum) Firefox, Safari, Chrome, Internet Explorer 9 and Internet Explorer 8, as well as on an iPhone and Android phone.

The Box Model

If there is one diagram in CSS to understand, it is the following one:

The box model

The box model, showing the margins and paddiing for an element.

Here is the HTML for the diagram above:

HTML for box model

The HTML refers to classes, which are shown below.

The classes referred to might look something like this:



background-color: #fdd;

border: 1px solid black;




margin: 30px;

border: 1px dotted #000;

padding: 40px;

background: #ddf;


This shows that the text within the inner box has 30 pixels margin round it, and 40 pixels padding.

I think the easiest way to understand the difference between padding and margins is this: if you set the background colour for a block element (such as a paragraph or div tag), the padding appears coloured but the margin doesn't.

Setting Margins and Padding

There are a number of ways to set padding and margins (both use the same syntax), as shown below.

To set Example Shorthand for
All sides padding: 10px; padding-top: 10px;
padding-bottom: 10px;

padding-left: 10px;
padding-right: 10px;
margin: 20px 10px; margin-top: 20px;
margin-bottom: 20px;

margin-left: 10px;
margin-right: 10px;
Top, right,
bottom, left
margin: 10px 20px 30px 40px; margin-top: 10px;
margin-bottom: 30px;

margin-left: 40px;
margin-right: 20px;

The mnemonic for remembering the order of margins or padding is TRouBLe, for Top Right Bottom Left (alternatively, remember that the margins are numbered clockwise from the top).

 Centre-Aligning Block Elements

You can use the auto setting for margins to centre-align block elements horizontally:

Centre-aligned text in box

Here the pink box containing the text is centre-aligned horizontally within the white one.


The HTML for this is simple enough:

HTML for text box

The HTML displays a div tag with a class called horizBetter applied to it.


The CSS class is defined as follows:



/* magically centre align box */

margin: 50px auto;

padding: 5px;

background-color: #fee;

border: 1px solid #000;

width: 200px;


This creates a text box with a pink background, 200 pixels wide, with:

  • top and bottom margins of 50 pixels; and
  • left and right margins automatically set (creating centre alignment).

Note that you can use the following setting for a style to achieve this effect:



text-align: center;


However, this isn't browser-independent, and is more for centring text within a box, rather centring the box itself.


This blog has 0 threads Add post