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 |
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.
-
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.
-
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).
-
-
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.
-
Negative values for margin are allowed, but they are usually not a good idea since this can result in overlapping areas.
-
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>
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.