Understanding Margins, Paddings & Borders in CSS

When I first started learning CSS, I was super confused about the way padding, margins and borders worked. I was using margin props to move elements vertically or horizontally without understanding what was actually going on. For padding I had no idea what its point was. As for borders I could never understand why elements with borders would overflow their parent containers.

In this article I'll explain what I wished someone explained me years ago. By the end you'll have a perfect understanding of how these properties work and be able to use them effectively.

Margins

Margins are properties used to give breathing space to elements. As a real life example imagine houses built on a street block. The houses shouldn't be stuck to each other (in most cases), they should have spaces for driveways, yards, etc.

These are exactly how margins work in css. If we add many images together on a page, we don't want them to stick together so we add margins. Setting margin-top: 20px will define a spacing at the top of 20 pixels between every image. To set the margin all around we can do it like this.

img {
   margin: 20px 40px;
}

This will set 20px between images vertically and 40px horizontally. This gives our images nice even spacing between each other.

Padding

The padding property is a style we commonly give to buttons or containers. For example many "box containers" in websites use paddings so that the contents (text, images) are not stuck to the top or sides of the container and also have some breathing room from the container "walls".
Taking again our houses example, if we look at the design of the inside of a house, we wouldn't place tables or other furniture stuck to the walls (usually) we would place our table a few feet from each wall so we can access it all around. Paddings are similar to tables in a room. It wouldn't be nice to have our text stuck to the sides of the container or button, so by setting a padding, the text would not stick to the "walls".

Padding is best used with box-sizing: border box; so the padding is set on the inside.

Border

Borders are usually simpler to understand. They merely add a border to your element, but to keep the container a uniform dimension without overflowing its parent element, we use box-sizing: border-box once property again.
Using our house parallel, a border would be akin to painting the outside of our house in a red color, let's say, so it adds some decor. Setting the number of pixels for the border property will determine the thickness of the "painted bricks" on the outside of our house.

With this new knowledge we can design the perfect container element. We'll use margins, padding and borders.

.container {
    margin: 20px 40px;
    padding: 30px;
    border: 2px solid #fff;
    box-sizing: border-box;
}

These properties will make sure our container has breathing room between its siblings, inside room for its contents to breathe as well and a border to line the outside for emphasis or other design decisions.

Thats margins, paddings and borders in 5 minutes!