CSS Basics: Designers' Toolkit – Enhance Your Skills with Margin and Outer Spacing Techniques

CSS Property Margin – Outer Spacing of a Box

The CSS margin property is used to set the outer spacing of an element relative to its parent element or to adjacent elements. This means that margin will push the other elements away from it.

Margin is the shorthand property for the four properties

The value shown in orange is the standard use of the CSS margin property.

1. The margin property is used to create space around the element outside of any defined borders. The margins for each of the four sides (top, right, bottom, left) can be specified individually. They are usually given in px, em, or as a percentage. The space around the element is also called white space.

2. The margin property accepts 1, 2, 3, or 4 values to define the spacing used for each of the four sides.

   • One Value
     The value applies to each of the four sides.

   • Two Values
     The first value specifies the vertical outer spacing above (margin-top) and below (margin-bottom) the element.

     The second value specifies the horizontal outer spacing to the left (margin-left) and to the right (margin-right)

   • Three Values
     The first value specifies the outer spacing above (margin-top) the element.

     The second value specifies the horizontal outer spacing to the left (margin-left) and to the right (margin-right)

     The third value specifies the outer spacing to the bottom (margin-bottom)

   • Four Values
     The values are given clockwise, starting with the outer spacing above the element, i.e.

     the first value specifies the outer spacing to the top (margin-top)

     the second value specifies the outer spacing to the right (margin-right)

     the third value specifies the outer spacing to the bottom (margin-bottom)

     the fourth value specifies the outer spacing to the left (margin-left).

3. Margin doesn't affect the width or height of the HTML element. However, the total space required is the width respectively height of the Content Area plus margin.

4. Negative values for margin are allowed, but they are usually not a good idea since this can result in overlapping areas.

5. The auto value is a special case of outer spacing. When this value is set, the web browser itself determines the spacing. The most common use of the auto value is to center a block level element.

/* define region */
div {
  /* outer spacing: 1em vertical, 2em horizontal */
  margin: 1em 2em;

  /* background: antiqueWhite */
  background: #faebd7;

  /* border: gold */
  border: 0.125em solid #ffd700;
}


/* define a paragraph */
p {
  /* outer spacing: 1em vertical, 2em horizontal */
  margin: 1em 2em;

  /* inner spacing: top  1.5em, bottom 3em */
  /*                left 2em,   right  4em */
  padding: 1.5em 4em 3em 2em;

  /* background: paleSpring */
  background: #dfdfbc;

  /* text color: darkGrey */
  color: #404040;

  /* border: darkRed */
  border: 0.0625em solid #dd0000;
}

<div>
<p>In contrast to previous websites, for example, we no longer need to code two different websites one for Internet Explorer and one for other browsers. Now one page that is suitable for all browsers is sufficient. The page is also suitable for printing or for displaying on a smartphone. Please note: one page is suitable for all browsers and all devices.</p>
</div>

This background       represents the screen and is not part of the sample code.