BLOGS BY TOPIC
BLOGS BY AUTHOR
BLOGS BY YEAR
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.
- An Introduction to CSS Style Sheets
- The 3 Types of Style: Element, Class and Tag
- CSS Style Inheritance
- Margins and Padding in CSS (this blog)
- Measurement Units for CSS Styles
- Colours in CSS Style Sheets
- Float Styles
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.
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, showing the margins and paddiing for an element.
Here is the HTML for the diagram above:
The HTML refers to classes, which are shown below.
The classes referred to might look something like this:
border: 1px solid black;
border: 1px dotted #000;
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;||
|margin: 20px 10px;||
|margin: 10px 20px 30px 40px;||
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:
Here the pink box containing the text is centre-aligned horizontally within the white one.
The HTML for this is simple enough:
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;
border: 1px solid #000;
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:
However, this isn't browser-independent, and is more for centring text within a box, rather centring the box itself.