CSS - DISPLAY

    // DISPLAY
    display: block; //div, p, h1 . It Takes the whole line OF ITS PARENT ! doesn't have elements right or left
    By default takes 100% widht of parent and height of content. 
    display: inline; //a, span, img - No toma widht o height. Minimum space necessary. don't accept height values
    display: inline-block; //Si acepta width o height, can have elements  right or left. Width content, better height? margin and padding
    display: none; //dissapears but doesnt leave empty space, other elements take the space
    display: flex; inline-flex;
    display: grid; subgrid
    display: flot; flow-root;
    display: contents; table; inline-table; list-item, run-in,table-cell

    // UNITS
    In forms, label {display: blocK;} para evitar que se pongan al lado unos de otros

    // DIFFERENCE BETWEEN DISPLAY NONE AND VISIBILITY HIDDEN
    display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.
    visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.