Display

block

Uno encima del otro

Ocupan el 100% del ancho de la página por defecto (a no ser que se hayan establecido márgenes o lo que sea).

inline

Uno al lado del otro

No se les puede aplicar márgenes superior ni inferior, padding, etc. Sí tienen margin-left y margin-right.

No respetan ni width ni height.

Ocupan el ancho que necesita su contenido (por ej. la longitud de una palabra dentro de una etiqueta a)

inline-block

Mezcla de ambos

Se colocan como elementos en línea (uno al lado del otro)

Ocupan solo el ancho que su contenido requiere

Pero SÍ se les puede aplicar márgenes superior e inferior, padding, etc. (como a los de bloque)

display: none vs. visibility: hidden

display: none;

This value removes the element to which you apply it from the document flow. This means that the element is not visible and it also doesn't "block its position". Other elements can (and will) take its place instead.

visibility: hidden;

If you only want to hide an element but you want to keep its place (i.e. other elements don't fill the empty spot.

The element is only invisible, it's not removed from the document flow and of course also not from the DOM.