Elementi di blocco vs elementi incorporati in HTML: perché la distinzione?


15

La distinzione tra elementi block e inline mi è sempre sembrata strana. La differenza è che un elemento a blocchi occupa l'intera larghezza, forzando così un'interruzione di riga prima e dopo l'elemento e un elemento inline occupa solo il contenuto. Perché non avere un solo tipo di elemento: un elemento inline in cui puoi anche applicare altezza / larghezza personalizzate e utilizzarlo? Vuoi interruzioni di linea? Inserisci un <br />, o forse aggiungi un tag speciale nel CSS per quel comportamento. Il modo in cui è ora, non lo vedo risolvere alcun problema, e invece forza solo una proprietà che secondo me dovrebbe essere decisa da un designer.

Allora perché i due tipi?


La mia parte preferita di questa domanda è come usa uno stile inline per il <br/>e un <p>tag per separare l'ultima riga dal primo paragrafo. Forse dovresti iniziare a guardare alle grandi differenze nell'intenzione visiva piuttosto che alle differenze nell'attuazione.
riwalk

1
Sebbene ritengo che il 100% degli elementi di blocco sia utile e in disaccordo con la soluzione proposta, questa è ancora un'ottima domanda.
Nicole,

Risposte:


13

Tu dici:

Vuoi interruzioni di linea? Inserisci un <br />, o forse aggiungi un tag speciale nel CSS per quel comportamento. Il modo in cui è ora, non lo vedo risolvere alcun problema, e invece forza solo una proprietà che secondo me dovrebbe essere decisa da un designer.

Sei sulla buona strada - lo stile dovrebbe essere deciso dal designer.

Ma hai il problema al contrario. L'inserimento di un <br/>tag è in realtà l'opzione che "forza una proprietà che dovrebbe essere decisa da un designer" - all'interno del documento di markup, una volta che <br/>c'è, è lì - e solo con un CSS complicato / azzardato puoi rimuoverne l'effetto.

Inline / block elements, d'altra parte, sono puramente elementi in stile con un comodo valore predefinito per il caso d'uso comune. La proprietà visiva stessa può essere modificata istantaneamente da un designer CSS con display:inlineo display:block.

Prendiamo ad esempio l'elemento comune per la navigazione in questi giorni - <li>. Questi sono blockelementi predefiniti , ma i designer li faranno floatapparire in linea ( blockha proprietà più speciali che occupare l'intera linea, ma questa è una conversazione per un altro giorno).


3

La maggior parte degli elementi ha una formattazione standard ... La tua domanda potrebbe essere estesa per dire che questa formattazione dovrebbe essere anche una decisione del progettista e dovrebbe essere rimossa. Ho sempre pensato che fosse un punto di partenza e, se necessario, ho rimosso la formattazione (spesso non lo era). Ma alla fine ci sono alcune cose che sono naturali. Se ad esempio hai un paragrafo, ti aspetti che sia un elemento a blocchi perché questa è la natura di un paragrafo. Indipendentemente dal fatto che gli elementi dispongano o meno di impostazioni predefinite come blocco o in linea, in entrambi i casi desidero la possibilità di specificare questa opzione. Il motivo per cui dico questo è che l'IMO è più pulito nel rompere le cose in questo modo rispetto a lanciare un<br />nel codice HTML. Fa la stessa cosa? Sì. Ma con i recenti progressi in HTML, un grande sforzo si è concentrato sul renderlo più di un linguaggio semantico in cui si inserisce meno nell'HTML per quanto riguarda la formattazione e di più nel CSS. L' <br />interruzione di linea media che in genere si riferisce a un'interruzione di riga in un paragrafo o altra frase contenente la struttura. Alla fine non ha importanza per me, ma personalmente voglio la possibilità di avere una distinzione bloccata e integrata, quindi spero che almeno non rimuoveranno mai dal lato CSS!


2

È un po 'come dire che non c'è una vera differenza tra paragrafi e frasi. I paragrafi delimitano un gruppo di idee. In genere, una frase è per una singola idea.

Il markup riguarda la semantica, non la visualizzazione. In effetti, un designer è libero di trattare qualsiasi elemento predefinito in stile blocco come inline e viceversa.


2

In LaTeX , ci sono due modalità (esclusa la modalità matematica): la modalità orizzontale e la modalità verticale. Gli elementi (caratteri) sono piccole caselle che si accumulano "orizzontalmente" nel paragrafo. Quindi queste scatole più grandi si accumulano verticalmente. Questo è simile a (X) HTML: inline e block.


0

Mi sembra un problema di retrocompatibilità. L'elemento inline è stato probabilmente un'aggiunta successiva allo standard HTML, e quindi le pagine Web scritte nel 1992 possono ancora essere visualizzate nel 2011, è ancora supportata - come se ci fossero tonnellate di pagine Web di 19 anni là fuori ...!


-1

Penso che le modalità di visualizzazione siano così diverse tra blocco e in linea, che vale la pena fare una distinzione a livello di markup.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.