display: inline vs display: block

Qual è la differenza di base tra i seguenti CSS:

display:inline

e questo:

display:block

Usando questi separatamente su un elemento, ottengo lo stesso risultato.

display: block significa che l'elemento viene visualizzato come un blocco, come lo sono sempre stati i paragrafi e le intestazioni. Un blocco ha uno spazio bianco sopra e sotto di esso e non tollera alcun elemento HTML accanto ad esso, tranne se ordinato diversamente (aggiungendo una dichiarazione float ad un altro elemento, per esempio).

display: inline significa che l'elemento viene visualizzato in linea, all'interno del blocco corrente sulla stessa riga. Solo quando si trova tra due blocchi l'elemento forma un "blocco anonimo", che tuttavia ha la larghezza più piccola possibile.

Ulteriori informazioni sulle opzioni di visualizzazione: http://www.quirksmode.org/css/display.html

Bloccare

Occupa l'intera larghezza disponibile, con una nuova riga prima e dopo (display: block;)

In linea

Occupa solo la larghezza necessaria e non impone nuove linee (display: inline;)

display: block - un'interruzione di riga prima e dopo l'elemento

display: inline - nessuna interruzione di riga prima o dopo l'elemento

Ecco una tabella di confronto:

Puoi vedere esempi qui.

display: block;crea un elemento a livello di blocco , mentre display: inline;crea un elemento a livello in linea . È un po 'difficile spiegare la differenza se non si ha familiarità con il modello di casella CSS, ma è sufficiente dire che gli elementi a livello di blocco interrompono il flusso di un documento, mentre gli elementi in linea no.

Alcuni esempi di elementi di livello di blocco sono: div, h1, p, e hrHTML tags.

Alcuni esempi di elementi di livello di riga sono: a, span, strong, em, b, e iHTML tags.

Personalmente, mi piace pensare agli elementi incorporati come elementi tipografici . Questo non è del tutto o tecnicamente corretto, ma per la maggior parte gli elementi in linea si comportano in modo molto simile al testo.

Puoi leggere un altro articolo sull'argomento qui . Visto che molte altre persone in questo thread lo hanno citato, potrebbe valere la pena di leggerlo.

Display: il blocco prenderà l'intera linea, cioè senza interruzione di linea

Display: inline occuperà solo lo spazio esatto richiesto.

 #block
  {
   display : block;
   background-color:red;
   border:1px solid;
  }

 #inline
 {
  display : inline;
  background-color:red;
  border:1px solid;
 }

È possibile fare riferimento ad esempio in questo violino http://jsfiddle.net/RJXZM/1/ .

gli elementi di blocco si espandono per riempire il loro genitore.

gli elementi in linea si contraggono per essere abbastanza grandi da contenere i loro figli.

blocco di visualizzazione

occupa l'intera riga (100%) dello schermo, è sempre il 100% delle dimensioni dello schermo

esempio di blocco display

display: inline-block occupa tutta la larghezza necessaria, può essere dall'1% al 100% della dimensione dello schermo

mostra un esempio di blocco inline

ecco perché abbiamo div e span

Lo stile div predefinito è blocco display: occupa l'intera larghezza dello schermo

lo stile predefinito è display: blocco in linea: lo span non inizia su una nuova linea e occupa solo la larghezza necessaria

Aggiungi un colore di sfondo all'elemento e vedrai bene la differenza tra inline e blocco, come spiegato dagli altri poster.

Display: block Si comporta in modo molto simile ai tag 'p' e occupa l'intera riga e non può esserci alcun elemento accanto fino a quando non viene floatato. Display: inline Utilizza solo lo spazio necessario e consente ad altri elementi di essere allineati insieme a se stesso.

Usa queste proprietà in caso di moduli e otterrai una migliore comprensione.

un blocco o blocco inline può avere una larghezza (es. larghezza: 400px) mentre l'elemento inline non è influenzato dalla larghezza. l'elemento inline può estendersi alla riga di testo successiva (esempio http://codepen.io/huijing/pen/PNMxXL ridimensionare la finestra del browser per vederlo) mentre l'elemento block non può.

 .inline {
      background: lemonchiffon;
      div {
        display: inline;
        border: 1px dashed darkgreen;
      }

Elementi a blocchi : elementi come div, p, le intestazioni sono a livello di blocco. Iniziano da una nuova linea e occupano l'intera larghezza dell'elemento genitore. Elementi incorporati : gli elementi che piacciono a b, i, span, img sono di livello inline. Non partono mai da una nuova linea e occupano una vasta gamma di contenuti.

Per impostazione predefinita, gli elementi in linea non impongono l'avvio di una nuova linea nel flusso del documento. Gli elementi di blocco, d'altra parte, in genere causano un'interruzione di linea, è possibile fare riferimento a questo collegamento