Line-height e margine negativo

Esempio introduttivo Ti ricordo per il momento che se un elemento inline ha un font-size di 15px, tutti gli elementi […]
Line-height e margine negativo

Esempio introduttivo

Ti ricordo per il momento che se un elemento inline ha un font-size di 15px, tutti gli elementi ‘em’ che compongono l’elemento avranno altezza di 15px e di conseguenza l’altezza dell’area di contenuto sarà di 15px.

Aggiungiamo la line-height

Se a questo stesso elemento venisse applicato anche un valore di line-height, l’interprete suddividerebbe il risultato, dato dalla differenza tra font-size e line-height, a metà e ne applicherebbe metà alla parte superiore e metà a quella inferiore. La somma tra l’area di contenuto più l’interlinea determina il riquadro inline.

Ecco un esempio di codice

Consideriamo il classico esempio di un paragrafo a cui viene applicato un valore di line-height (la line-height non viene applicata ad elementi di blocco ma al loro contenuto, sia che esso sia un elemento inline che una riga di testo). Il paragrafo flotta intorno ad un primo div. Ti sei accorto di quello spazio bianco tra il limite superiore del div e l’inizio del paragrafo. Non dirmi che non ti è mai capitato! Quello spazio è proprio dato dall’attribuzione di un valore di line-height pari a 24px; L’interprete lo ha sottratto al valore di font-sixe di 12px e il restante (12px) lo ha applicato metà alla parte superiore e metà alla parte inferiore del riquadro di contenuto, 6px in alto e 6px in basso. Ecco spiegati quei 6px di scarto da dove escono fuori.

Segue il codice css e html per ottenere quanto appena visto in figura:

*{
	margin:0;
	padding:0;
}

body{
	margin:20px;
}

#container{
	border:1px solid #ccc;
	width:200px;
	height:200px;
	float:left;
	margin-right:10px;
}

p{
	float:left;
	font-size:12px;
	line-height:24px;
	width:200px;
}
Consectetur adipisicing elit, ut labore et dolore magna aliqua. Velit esse cillum dolore duis aute irure dolor ut aliquip ex ea commodo consequat. Qui officia deserunt sed do eiusmod tempor incididunt consectetur adipisicing elit.

La soluzione?

Ti abbiamo già parlato dei margini negativi e della loro grande potenza di utilizzo in determinate situazioni. Questo mi sembra il momento più adatto per usarli. Applica un margin top negativo al paragrafo (in questo caso -6px) pari alla valore risultante dalla differenza tra line-height e il font-size diviso 2 … e colmerai lo spazio bianco tra il limite superiore e l’inizio della riga di testo.

Attenzione comunque a non abusarne e ad usari senza un criterio logico, possono essere tanto potenti quanto distruttivi se non utilizzati accuratamente.

Un saluto da laboratorio css, alla prossima!

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github