Elementi di blocco in linea
In questo articolo discuteremo della proprietà degli elementi del blocco in linea. È una proprietà molto utile dei CSS. Possiamo applicarlo a vari tag. Fa parte della proprietà di visualizzazione CSS.
Utilizzo:
display: inline-block
Applicando la proprietà di cui sopra, l'elemento si comporterà come inline e bloccherà per i suoi elementi figlio. Comprendiamo gli elementi inline e block.
Elementi in linea
Gli elementi che non iniziano su una nuova riga sono detti elementi in linea. Sono combinati come parte del testo principale e non come azione separata. Questi elementi occupano solo lo spazio richiesto. Gli spazi a sinistra e a destra possono essere aggiunti a un elemento in linea, ma non è possibile aggiungere altezza al riempimento o al margine superiore o inferiore di un elemento in linea.
Esempio di elementi in linea:
Esempio:
Page Title .highlight{ background-color:#efefef} It is a demo span <span>inline element</span>; whose span is an highlighted with a grey color indicating that it is an inline tag Produzione:
Elementi di blocco
Gli elementi che iniziano su una nuova riga sono detti elementi blocco. Un elemento blocco acquisisce l'intera larghezza disponibile per quel contenuto. A differenza dell'inline, esiste un margine superiore e inferiore per questi elementi. Gli elementi a livello di blocco possono apparire solo all'interno del tag body. Gli elementi a livello di blocco creano una struttura più ampia rispetto agli elementi in linea.
Esempio di elementi di blocco:
,
Esempio:
Page Title p { background-color: #8A55; } <p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p> Produzione:
Elementi di blocco in linea
Il valore di visualizzazione di inline-block funziona in modo simile a inline con un'eccezione: l'altezza e la larghezza di quell'elemento diventano modificabili.
Esempio:
span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; color:white; border: 1px solid blue; background-color: blue; } This is an example of inline-block element with a span colored as blue <span>Inline-Block</span> Produzione:
Di seguito è riportato il file di output utilizzando tutti gli elementi su una pagina:
Codice
span.a { display: inline; /* the default for span */ width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: blue; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: green; } span.c { display: block; width: 70px; height: 50px; padding: 5px; border: 1px solid blue; background-color: pink; } <h2>display: inline</h2> This is section with a inline span made blue <span>inline</span> <span>element</span> <h2>display: block</h2> This is section with a block span made pink <span>block</span> <span>element</span> . <h2>display: inline-block</h2> This is section with a inline block span made green<span>inline</span> <span>block</span> 
