css display

1/* legacy values */
2display: block;
3display: inline;
4display: inline-block;
5display: flex;
6display: inline-flex;
7display: grid;
8display: inline-grid;
9display: flow-root;
10
11/* box generation */
12display: none;
13display: contents;
14
15/* two-value syntax */
16display: block flow;
17display: inline flow;
18display: inline flow-root;
19display: block flex;
20display: inline flex;
21display: block grid;
22display: inline grid;
23display: block flow-root;
24
25/* other values */
26display: table;
27display: table-row; /* all table elements have an equivalent CSS display value */
28display: list-item;
29
30/* Global values */
31display: inherit;
32display: initial;
33display: revert;
34display: unset;
35

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}

1display: none;
2display: block;
3display: inline;

1
2/******************* BASIC BLOCK DISPLAY **********************/
3
4/**************** Block display Elements  *********************/
5/*Elements that block any other elements from being in the 
6same line. You can change the width from being the maximum 
7width of the page, but you can´t put elements side by side */
8tag_name {
9    display: block;
10}
11
12/*Exemple of default block display elements:*/
13<h1> ... </h1>
14<p> ... </p>
15
16
17/**************** Inline display Elements  *********************/
18/*They are the type of blocks that only take up the minimum space 
19required (both in width and height). You can place these types of 
20blocks side by side (on the same line) but you cannot change their 
21dimensions */
22
23tag_name {
24    display: inline;
25}
26
27/*Exemple of default inline display elements:*/
28<spans> ... </spans>
29<img> ... </img>
30<a> ... </a>
31
32
33/************* Inline-block display Elements  *****************/
34/*They take the best of the two other types above. You can put 
35elements side by side (on the same line) and you can change this 
36block width and height */
37
38tag_name {
39    display: inline-block;
40}
41
42
43/***************** None display Elements  ********************/
44/*This block will never appear on your webpage and will never 
45interact with the other elements (it doesn't take up space) */
46
47tag_name {
48    display: none;
49}
50

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}