1
00:00:06,660 --> 00:00:15,180
Hello guys! Welcome to the course "Web technologies and  web design for beginners" and then this simple example I will show you

2
00:00:15,180 --> 00:00:23,562
 the  difference between margin and padding which 
are elements of block element in your systems and HTML.

3
00:00:23,562 --> 00:00:31,680
Let's start with one block with class "parent" and containing words "Hello Word".

4
00:00:31,680 --> 00:00:38,026
As you  can see, the document body is light gray and the 
element itself is solid red. 

5
00:00:38,026 --> 00:00:52,440
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

6
00:00:52,557 --> 00:00:58,022
inside it, so this empty space is also filled with 
solid red. 

7
00:00:58,256 --> 00:01:03,260
Now let's do the same but for margin.

8
00:01:05,220 --> 00:01:09,320
And you can see that our element with class "parent" is pushed 

9
00:01:09,320 --> 00:01:17,219
from the sides  of the document on 25 pixels on each side.

10
00:01:18,118 --> 00:01:24,384
This is the core difference between margin  and padding.
Margin is an empty space around the element

11
00:01:24,384 --> 00:01:29,516
 and it's not considered of its part and  it's not filled with the background color 

12
00:01:29,516 --> 00:01:34,545
or any other CSS styles that are applied to the element.

13
00:01:35,228 --> 00:01:37,920
If we add both both margin and padding...

14
00:01:40,813 --> 00:01:48,090
...we will see even more empty space around the 
phrase "hello world" because we will have 

15
00:01:48,090 --> 00:01:58,223
not colored 24 pixels on each side triggered by 
parameter margin and also 24 pixels on each side 

16
00:01:58,223 --> 00:02:08,280
triggered by parameter padding. 
Now let's add a bit more style adding style to each  

17
00:02:08,280 --> 00:02:14,017
element of our parent block.
Don't forget to close your tags. 

18
00:02:15,416 --> 00:02:18,518
Now let's edit CSS here. 

19
00:02:20,823 --> 00:02:29,662
And what we can see? Here we still have 25 pixels around the element  which are painted in red,

20
00:02:29,753 --> 00:02:34,198
 because these are paddings of our element with style padding.

21
00:02:34,767 --> 00:02:44,821
Now let's add the same padding to the child. And we see that we have them not multiplied or added or whatever.

22
00:02:46,002 --> 00:02:52,563
Next time we will check how to position block elements and how margin and padding  

23
00:02:52,563 --> 00:02:56,073
affect the positioning of elements relating to each 
other.

24
00:02:56,411 --> 00:02:58,411
Thanks for watching and stay tuned!