Practical: Applying Padding and Margins

The goal of this lesson is to show you a real world example of how padding and margin work.

First off, let’s see a very important use of margins.

How to Perfectly Center Elements Horizontally

Consider the markup below:


 <div class="center"></div>

A simple div with a class, .center

Assume the div is styled like so:


  .center {
      width: 250px;
      height: 250px;
      border: 2px solid red;
      background-color: rgb(189,195,199);
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
      margin-bottom: 30px;
  }

It is just a div with a width and height. Oh, and a border too! The other style declarations are for margins.

Before any further explanations, here is the result of that:

Get hands-on with 1200+ tech skills courses.