codingtcher.com
Theme Night
Home
Login

Css Margins

Home » Css » Css Margins

margin shorthand CSS

margin: 10px 5px 10px 5px;
Source: developer.mozilla.org

how does margin work in css

margin: 20px 10px 30px 40px; /* top | right | bottom | left */

css margin

margin: <margin-top> || <margin-right> || <margin-bottom> || <margin-left>

/* shorthand margin*/
.box {
  margin: 20px;
}

/* The same margin written longhand */
.box {
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
}

margin css

/* Apply to all four sides */
margin: 1em;
margin: -3px;

/* vertical | horizontal */
margin: 5% auto;

/* top | horizontal | bottom */
margin: 1em auto 2em; 

/* top | right | bottom | left */
margin: 2px 1em 0 auto;

/* Global values */
margin: inherit;
margin: initial;
margin: unset;
Source: developer.mozilla.org

CSS margin

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Css Related Post