Still need help? Submit a support ticket.

What is the difference between Margin and Padding

In CSS, the "box model" concept is considered when talking about design and layout.

The CSS box model is effectively a box that wraps around HTML elements, and includes margins, borders, padding, and the actual content.

The box model allows us to add a border around elements, and to define space between elements.

The image below illustrates the box model:

Each part has a different purpose:

  • Content - The content of the box, where text and images appear
  • Padding - Clears an area around the content. The padding is transparent
  • Border - A border that goes around the padding and content
  • Margin - Clears an area outside the border. The margin is transparent

For Example: 

div {
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}