Padding

[Dubal]

Scusate, non capisco l'utilizzo del padding.

Io ho un DIV largo 100, per esempio.
All'interno inserisco del testo.
Il testo avrà inizio dove inizia il DIV e terminerà al termine del DIV, quindi occuperà tutto lo spazio disponibili.

Se volessi lasciare un bordo sul lato sinistro e sul lato destro, come devo fare?
Inizialmente ho applicato al DIV un padding a sinistra ed a destra di 10.
Il testo è rientrato effettivamente di 10, ma ora il DIV in totale è 120

Non c'è un modo per applicare il padding ad un DIV senza che questo perda le sue misure originali?

Vi ringrazio
Ciao

[carlomarangoni]

Per convenzione la larghezza di un div e composta da:
bordo+padding+contenuto
pertanto se vuoi un div di 200px devi avere queste misure:
bordo 2px
larghezza div 176px
padding 10px

[Dubal]

Io vorrei semplicemente che il DIV da 100, rimanga 100.
Anche con il padding.

Ho "scoperto" che se al mio DIV aggiungo un padding di 10, il mio DIV risulterà 110.
Perchè il padding va ad aggiungere dello spazio.

Sono sempre stato convinto che il padding andasse a lavorare sulla misura interna.
Quindi se ad un DIV da 100, applicassi un padding sulla sinistra di 10, il testo all'interno del DIV risulterebbe spostato di 10. Invece non è cosi.

[Ticio94]

Certo!
Basta che al div assegni una larghezza adeguata.

Noi sappiamo che la larghezza totale di un elemento è data da:

Larghezza totale dell'elemento = margine sinistro + bordo sinistro + padding sinistro + area del contenuto + padding destro + margine destro.

Ora a noi i valori dei margini e bordi non interessano, ma sappiamo che:

larghezza del div = area del contenuto (100px) + padding sinistro (10px) + padding destro (10px) = 120px

Quindi se si vuole ottenere una largezza del div di 100px con padding di 10px:

larghezza del div = area del contenuto (100px) - padding sinistro (10px) - padding destro (10px) = 80px

Assegneremo quindi con l'attributo "width" una larghezza al div di 80px.

Infatti, il padding (per ovvie ragioni) non rientra il contenuto dell'elemento ma si limita a creare dello spazio tra l'area del contenuto e il bordo interno.

[Dubal]

Ora ho capito la tua spiegazione
Mi hai evitato un pò di lavoro, stavo per inserire un DIV più piccolo nel DIV iniziale ...

Grazie mille

[carlomarangoni]

Originariamente inviato da Dubal
Ora ho capito la tua spiegazione
Mi hai evitato un pò di lavoro, stavo per inserire un DIV più piccolo nel DIV iniziale ...

Grazie mille

É esattamente ciò che ti avevo detto io!

[Dubal]

Originariamente inviato da carlomarangoni
É esattamente ciò che ti avevo detto io!

Si infatti la mia era una risposta ad entrambi
Ci sono arrivato dopo, ma ci sono arrivato!

Grazie ancora

[Ticio94]

Originariamente inviato da Dubal
Si infatti la mia era una risposta ad entrambi
Ci sono arrivato dopo, ma ci sono arrivato!

Grazie ancora

Di nulla