---
title: CSS Margin - Web design help
description: CSS Margin - Web design help
---

[Web design & marketing tips by Ironpaper ](https://www.ironpaper.com/current)

# [CSS Margin - Web design help](https://www.ironpaper.com/current/2009/09/css-margin-web-design-help)

 Written by [Ironpaper](https://www.ironpaper.com/current/author/admin) | Sep 21, 2009 3:15:45 PM

The **CSS margin** properties define the space around elements.

margin: top right bottom left;

The CSS property MARGIN clears the area surrounding an element. The background color of the MARGIN is transparent (no background color, at all).

**Values of CSS MARGIN**:  
 There are three possible values for the margin properties: auto, fixed, percentage.  
 1. Auto: The browser determines the margin.  
 2. Defines a fixed margin area. This area can be defined in px, pt, em, etc.  
 3. Defines a margin in percentage ( expressed as: % ) of the containing element

**Defining margin for each side as a single statement**:  
 margin-top: 0px;  
 margin-bottom: 0px;  
 margin-right: 0px;  
 margin-left: 0px;

**Defining MARGIN for all sides in a single statement**:  
 margin: top right bottom left;  
 margin: 1px 2px 3px 4px;

**Define one value for all sides:**  
 You can also define the margin properties using a single value, which will be applied to all sides.  
 margin: 1px;

[View full post](https://www.ironpaper.com/current/2009/09/css-margin-web-design-help)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Ironpaper"
  },
  "dateModified" : "2021-06-30T03:08:16.007Z",
  "datePublished" : "2009-09-21T15:15:45Z",
  "headline" : "CSS Margin - Web design help",
  "image" : {
    "@type" : "ImageObject",
    "height" : 40,
    "url" : "https://connect.ironpaper.com/hubfs/Imported_Blog_Media/webdesign-tips-1.gif",
    "width" : 500
  },
  "mainEntityOfPage" : "https://www.ironpaper.com/current/2009/09/css-margin-web-design-help",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "Web design & marketing tips by Ironpaper"
  }
}
```