Desativando a renderização do elemento HTML no bloco: none Quando definimos um elemento com CSS display none, significa que ele e os seus elementos filhos não são exibidos na tela.
A propriedade CSS display especifica o tipo de caixa de renderização usada por um elemento. No HTML, os valores padrões da propriedade display são feitas a partir do comportamento descrito nas especificações HTML ou da folha de estilo padrão do navegador/usuário.
inline-block: exibe um elemento HTML como um contêiner de bloco de nível inline. O interior deste bloco é formatado como caixa de nível de bloco e o elemento em si é formatado como uma caixa de nível in-line. Sintaxe: display: inline-block; none: elemento que "esconde" um elemento HTML como se não existisse.
O navegador define cada elemento <li> como display: block. Por este motivo, cada elemento está um embaixo do outro. Mas para implementarmos o nosso desafio, precisamos deixar os três elementos um do lado do outro. Para fazer isso, é só definir cada tag <li> com o valor inline na propriedade display.
display:none retira o elemento do layout da página. Mas você ainda pode continuar manipulando ele no DOM. visibility:hidden deixa de mostrar o elemento, ou seja, ele deixa de ser visível na página mas seu espaço continua ocupado, ou seja, o layout da página não é alterado por causa disto.
18 curiosidades que você vai gostar
None. Ao contrários dos valores atuais, o valor none permite, informalmente dizendo, que você desative a propriedade do elemento. Quando você utiliza essa propriedade, o elemento e todos seus elementos filhos não são renderizados na página.
LCD (Display)
Peça responsável por exibir imagens do aparelho, o Display pode apresentar imagem distorcida ou ainda ficar completamente sem imagem. Em alguns modelos, o touch é conectado ao display, ocasionando possíveis falhas na conexão.
Eduardo a diferença é que elementos com display: inline; não pode ser definido height e width para eles, ao contrário do display: inline-block os elementos aceitam que seja definido os respectivos atributos css.
"Inline" é uma categorização dos elementos do HTML, em contraste com os "elementos de bloco". Os elementos inline podem ser exibidos em nível de bloco ou outros elementos inline. Eles ocupam somente a largura de seu conteúdo.