1. Home
  2. CSS margin property

The best CSS margin property Tutorial In 2024, In this tutorial you can learn Examples,Attribute definitions and instructions,Browser Support,Property Value,related articles,

CSS margin property

Examples

A p element set all four margins:

p
{
margin: 2cm 4cm 3cm 4cm;
}

Attribute definitions and instructions

margin shorthand property sets all margin properties in one declaration. This property can have the value 1-4.

Example:

  • margin: 10px 5px 15px 20px;
    • The margins are 10px
    • Right margin is 5px
    • Lower margins are 15px
    • Left margin is 20px

  • margin: 10px 5px 15px;
    • The margins are 10px
    • On the right and left margins are 5px
    • Lower margins are 15px

  • margin: 10px 5px;
    • On the top and bottom margins are 10px
    • On the right and left margins are 5px

  • margin: 10px;
    • All four margins are 10px

Note: negative values are allowed.

Defaults: 0
inherit: no
version: CSS1
JavaScript syntax: object .style.margin = "10px 5px"

Browser Support

Figures in the table represent the first browser to support the version number of the property.

属性
margin 1.0 6.0 1.0 1.0 3.5

Property Value

value description
auto Browser calculated margin.
length In particular the provisions margin Unit of value, such as pixels, centimeters, and the like. The default value is 0px.
% Based on a predetermined percentage of the parent element width margins.
inherit The provisions margin should inherit from the parent element.

related articles

CSS tutorial: CSS Margin

Hot Tools

Other Tools

Online Tutorial

Website Navigation

CSS margin property
10/30