Hello guys! Welcome to the course "Web technologies and  web design for beginners" and then this simple example I will show you

 the  difference between margin and padding which 
are elements of block element in your systems and HTML.

Let's start with one block with class "parent" and containing words "Hello Word".

As you  can see, the document body is light gray and the 
element itself is solid red. 

Let's add padding equal to 24 pixels on each side and voila! We see that these 24 pixels are added on all sides of our element

inside it, so this empty space is also filled with 
solid red. 

Now let's do the same but for margin.

And you can see that our element with class "parent" is pushed 

from the sides  of the document on 25 pixels on each side.

This is the core difference between margin  and padding.
Margin is an empty space around the element

 and it's not considered of its part and  it's not filled with the background color 

or any other CSS styles that are applied to the element.

If we add both both margin and padding...

...we will see even more empty space around the 
phrase "hello world" because we will have 

not colored 24 pixels on each side triggered by 
parameter margin and also 24 pixels on each side 

triggered by parameter padding. 
Now let's add a bit more style adding style to each  

element of our parent block.
Don't forget to close your tags. 

Now let's edit CSS here. 

And what we can see? Here we still have 25 pixels around the element  which are painted in red,

 because these are paddings of our element with style padding.

Now let's add the same padding to the child. And we see that we have them not multiplied or added or whatever.

Next time we will check how to position block elements and how margin and padding  

affect the positioning of elements relating to each 
other.

Thanks for watching and stay tuned!