Web Design

Margins and Padding

Making space for styling with HTML and CSS

Understanding Margins

Margins allow you to space out your content and give more space for certain elements.

The types of margins

There are technically 5 different types of margins, but they are all connected.

Margin

By adding margin: 5px; CSS adds a 5px margin to every side of your object. This gives it even spacing all around.

    <div class=”block” style=”margin: 5px;”></div>

Left,Right,Bottom,Top Margins

You can also add margins to a certain direction.

<div class=”block” style=”margin-left: 5px;”></div>
<div class=”block” style=”margin-right 5px;”></div>
<div class=”block” style=”margin-bottom: 5px;”></div>
<div class=”block” style=”margin-top: 5px;”></div>

This is a lot more used due to the fact you can set them up in different directions.

Padding

While margins are for making space the outside of an element, padding is for the inside. These make it easier for content nested inside of an element to not stick to the side, but have some space.

Adding Padding

By adding padding: 5px; CSS adds a 5px padding to every side of your object. This gives it even spacing all around.

        <div class=”block” style=”padding: 5px;”></div>

Left, Right, Bottom, and Top Padding

You can also add padding to a certain direction.

<div class=”block” style=”padding-left: 5px;”></div>
<div class=”block” style=”padding-right 5px;”></div>
<div class=”block” style=”padding-bottom: 5px;”></div>
<div class=”block” style=”padding-top: 5px;”></div>

That's it!

We have just gone through some basic HTML and CSS that could be used to build a very basic site. Next, we will be designing our site visually using Figma.

chevron_up