1
00:00:00,940 --> 00:00:02,840
Hello everyone and welcome back.

2
00:00:03,890 --> 00:00:10,200
In today's video we will learn about display volumes in each team and all the elements have a default

3
00:00:10,200 --> 00:00:17,440
value which is mostly block and in line but we can overlay these display values using the display properties

4
00:00:17,460 --> 00:00:18,530
of CSX.

5
00:00:18,540 --> 00:00:21,120
Let's try an example to understand it better.

6
00:00:21,540 --> 00:00:23,910
Let's say you've got these divisions.

7
00:00:25,380 --> 00:00:26,550
Let's add a class to it.

8
00:00:27,600 --> 00:00:30,130
Say image roughly.

9
00:00:31,260 --> 00:00:32,150
Let's just.

10
00:00:32,280 --> 00:00:35,960
You stood in all the divisions

11
00:00:48,610 --> 00:00:49,720
but save it.

12
00:00:50,310 --> 00:00:59,790
Let's bring about good editor here so because it's a glass of DOT and image wrap when

13
00:01:02,800 --> 00:01:05,760
so def has a default value of block.

14
00:01:06,550 --> 00:01:07,570
So let's change that.

15
00:01:07,780 --> 00:01:12,720
So instead of display log let's make it in line.

16
00:01:12,910 --> 00:01:21,840
Let's say it now as you can see because the display became inline so all the content.

17
00:01:21,880 --> 00:01:27,010
Now it can come next to each other similarly span as a default value of inline.

18
00:01:28,030 --> 00:01:30,370
So let's try out in some span.

19
00:01:30,400 --> 00:01:31,760
So coming up here

20
00:01:34,840 --> 00:01:40,100
let's automotive an insight that lets out multiple span see home

21
00:01:43,410 --> 00:01:44,270
looses

22
00:01:48,230 --> 00:01:49,270
an amount.

23
00:01:50,240 --> 00:01:55,400
Let's give them a plus C class menu item

24
00:01:58,160 --> 00:02:09,390
let's pasted here and hew to it as you can see here we've got these funds next to each other.

25
00:02:09,390 --> 00:02:14,490
Because as far as the display value of in line so if we change it to block.

26
00:02:14,860 --> 00:02:25,240
So let's try that same menu item on display block so once we change your display block.

27
00:02:25,270 --> 00:02:28,920
Now it's taking the width of the entire space available.

28
00:02:29,080 --> 00:02:31,590
That's why all our spending limits.

29
00:02:31,620 --> 00:02:36,280
They're just coming on the next line display also except and other property.

30
00:02:36,940 --> 00:02:39,380
None.

31
00:02:39,430 --> 00:02:43,880
So what this does is it hides your estimate element.

32
00:02:43,930 --> 00:02:46,830
Similarly it says has another property called visibility.

33
00:02:47,410 --> 00:02:55,610
So let's just bring it back for now and let's say visibility so it accepts hidden and visible.

34
00:02:56,090 --> 00:03:00,220
So let's give it a value of say hidden.

35
00:03:00,390 --> 00:03:06,910
And when you make visibility hidden that element go away but they still take the space.

36
00:03:07,000 --> 00:03:10,450
So display so none

37
00:03:16,940 --> 00:03:18,300
so far as you see here.

38
00:03:18,320 --> 00:03:20,070
Each menu item taking one line.

39
00:03:20,780 --> 00:03:24,890
So when we do usability hidden the content goes away.

40
00:03:25,130 --> 00:03:27,530
But this does take the space.

41
00:03:27,530 --> 00:03:29,530
But when we do display displayed.

42
00:03:30,080 --> 00:03:34,460
The extreme elements height as well as the don't occupy any space.

43
00:03:34,460 --> 00:03:40,550
So that's the difference between display none and visibility hidden still would want that space to be

44
00:03:40,550 --> 00:03:42,220
taken by your external elements.

45
00:03:42,230 --> 00:03:47,980
In those cases you can use visibility then but there will be cases where you would want your estimate

46
00:03:47,980 --> 00:03:52,430
element to hide altogether including not taking the space.

47
00:03:52,430 --> 00:03:56,740
So in those cases you can use display not that's also the day guys.

48
00:03:56,750 --> 00:04:01,960
If there's something that you did not understand feel free to local comment and we will discuss it.

49
00:04:01,970 --> 00:04:04,000
See in the next video by Andy.