Margin, Padding & Border

1.my-box {
2  margin: 20px;    /* Pushes neighbors away */
3  margin-top: 50px; /* Specific side override */
4}

1.padded-box {
2  padding: 25px; /* Space between text and border */
3}

1.border-box {
2  border-width: 3px;
3  border-style: solid;
4  border-color: red;
5 
6  /* Shorthand: Width Style Color */
7  border: 3px solid red;
8}

1/* 4 Values: Top, Right, Bottom, Left */
2margin: 10px 20px 30px 40px;
3 
4/* 3 Values: Top, Sides, Bottom */
5padding: 10px 50px 20px;
6 
7/* 2 Values: Top/Bottom, Left/Right */
8margin: 20px 50px;
9 
10/* 1 Value: All Sides */
11padding: 20px;

1<!-- The space between the blocks will be 30px, not 50px -->
2<div style="margin-bottom: 30px;">Box A</div>
3<div style="margin-top: 20px;">Box B</div>