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!