Hi there, this tutorial is about differences between margins and padding. Margins and padding are mainly CSS techniques to define location of an HTML object on our page. Margin and padding used for any html element from tables to divs and forms.

We will start from margin. So what actually Margins are ? Margins define absolute location of an html object on our page, for example if you created content div and you want some space between your menu and div itself, you will not use <br> tags, because it makes your website too fancy and you will need to type <br> tags again and again.

So, if you want to move your div html object 50 pixels from top, you can use margins, and a CSS code looks like that :

margin-top:50px;

You can use 2 types of margins definitions , you can define each side like margin-top,margin-bottom,margin-righjt,margin-left,  and you can insert all definitions in one line of the code only.

margin:50px 50px 50px 50px;

And another example :

margin:5em 2em;

Please take a look at our html code generator, written especially for our margins and padding tutorials to play with margins and to understand what is it used for.

CSS Padding

Padding is a CSS command that controls position of an object inside of the box, for example we created some text box inside of div html object :

<div style=”border:1px solid #ccc”>

Sample text goes here

</div>

If we want this text to align a little bit  far from the border, we could do it like that :

<div style=”padding:20px;border:1px solid #ccc”>

Sample text goes here

</div>

Now our box is much more human readable.

You can use our margins and padding  html code generator to understand the differences between margins and padding. Define your sizes in em, px, % and check out how every size influences the output of the text.