CSS Basics: Create Eye-Catching Designs – The Essential Guide to Perfecting Margin Techniques

Deutsch

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; margin will push the other elements away from it.

Margin is the shorthand property for the four properties

margin-top space to the top
margin-right space to the right
margin-bottom space to the bottom
margin-left space to the left
Schematic repredentaion of outer space - Margin
Schematic of Outer Spacing – margin

CSS Property margin

Description Possible Values Default Value Category
outer space (white space) length in px or em
percentage
auto
initial
inherit
0 box model
spacing

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

Note:
  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. Margin 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. The 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.

Example CSS
/* 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;
}
Example HTML
<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>
Output of the HTML Code

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.

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