what does display inline block do 3f

1.d_in {
2    display: inline;
3    /* This causes a block-level element to act like an inline element. */
4}
5
6.d_b {
7    display: block;
8    /* This causes an inline element to act like a block-level element. */
9}
10
11.d_in_b {
12    display: inline-block;
13    /* This causes a block-level element to flow like an inline element 
14  	
15  	Compared to display: inline, the major difference is that
16  	display: inline-block allows to set a width and height on the element.
17	Also, with display: inline-block, the top and bottom margins/paddings 
18  	are respected, but with display: inline they are not.
19  
20  */
21  
22  
23}
24
25.d_n {
26    display: none;
27    /* This hides an element from the page. */
28}

1/*Compared to display: inline, the major difference is that
2display: inline-block allows to set a width and height on the element.
3
4Also, with display: inline-block, the top and bottom margins/paddings are
5respected, but with display: inline they are not.
6
7Compared to display: block, the major difference is that
8display: inline-block does not add a line-break after the element,
9so the element can sit next to other elements.
10
11The following example shows the different behavior of
12display: inline, display: inline-block and display: block: */
13
14
15span.a {
16  display: inline; /* the default for span */
17  width: 100px;
18  height: 100px;
19  padding: 5px;
20  border: 1px solid blue;
21  background-color: yellow;
22}
23
24span.b {
25  display: inline-block;
26  width: 100px;
27  height: 100px;
28  padding: 5px;
29  border: 1px solid blue;
30  background-color: yellow;
31}
32
33span.c {
34  display: block;
35  width: 100px;
36  height: 100px;
37  padding: 5px;
38  border: 1px solid blue;
39  background-color: yellow;
40}