Home | Services | Free Quote | Web Design | Pricing

Introduction to HTML Padding and Margins

HTML Padding and Margins - Giving our content space

An Element's margin, border, and padding

Giving us some space

As a general design rule you want to give different elements space, although there are exceptions for the most part we don't want to have our content flush against a border.

Like a paragraph separates different thoughts of one overall idea we want to separate the elements that make up our overall web page. Having a cluster of text and images makes things harder to read and navigate through.

From the examples we can see why it is important to have space between our elements, now lets see how it works.

Anatomy of an Element

When we talk about an element this could be any number of HTML tags. Each element can have a margin, border, and padding assigned to it, some basic elements like the paragraph tag (‹p›) have a margin on the top and bottom giving a large line-break. If we look at the diagram we see the margin on the outside of an element, the border, and padding within the border. Typically you can't see the margin nor padding but may specify a border's visibility, size, and pattern.
An Element's margin, border, and padding

Choose sides

Sometimes we will need to specify the amount of margin or padding on certain sides. If we have a margin around multiple elements next to each other they will have extra space between them where 2 margins touch. one way we could solve this problem is to have a margin only on a couple of sides and not all around the element. All of these elements have the same class which you can read more about when we get into CSS, but for now just understand we can change all of their attributes at once.
Elements layed out with margin and padding

Diffrent sizes on each side written in short-hand


While there are specified attributes in CSS for all 4 sides of an element, when we can we it's better to write out a 'short-hand' version of margin or padding. When writing short-hand there are 4 values for each margin or padding starting with the top and moving clock-wise around our element. This means that we can write out one attribute instead of 4 seperate ones.

{padding:5px 10px 8px 3px;}

If the bottom is unspecified it will have the same size as the top and like-wise for left and right.

Valid CSS! Valid HTML 4.01 Transitional
Privacy and Terms Of Service © 2004-2008 WebDesigners-Directory | RSS | Design Wall | Custom Web Design |

Web Design Directory: web design, web designer, web page and web site design, development firms, programming and HTML.

© Copyright 2008 All rights reserved.