Panoramica del modello di frame CSS

Il modello di scatola CSS (Box Model) definisce come l'elemento gestisce il contenuto dell'elemento.Padding,Border e Margini modo.

Panoramica del modello di frame CSS

Modello di frame CSS

La parte più interna della scatola dell'elemento è il contenuto reale, seguito direttamente dal padding. Il padding presenta lo sfondo dell'elemento. La parte esterna del padding è il border. Al di fuori del border c'è il margin, che di default è trasparente e non oscura alcun elemento posteriore.

Suggerimento:Lo sfondo viene applicato all'area composta da contenuto, padding e border.

Il padding, il border e il margin sono opzionali e il valore predefinito è zero. Tuttavia, molti elementi saranno impostati dallo stile del proxy utente. È possibile sovrascrivere questi stili dei browser impostando il margin e il padding dell'elemento a zero. Questo può essere fatto separatamente o utilizzando un selettore universale per impostare tutti gli elementi:

* {
  margin: 0;
  padding: 0;
}

In CSS, width e height si riferiscono alla larghezza e altezza dell'area di contenuto. L'aumento del padding, del border e del margin non influisce sulle dimensioni dell'area di contenuto, ma aumenta la dimensione totale dell'elemento.

Supponiamo che ogni lato della scatola abbia un padding di 10 pixel e un padding interno di 5 pixel. Se si desidera che la scatola raggiunga 100 pixel, è necessario impostare la larghezza del contenuto a 70 pixel, come illustrato nella figura sottostante:

Esempio di modello di frame CSS 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

Suggerimento:Il padding, il border e il margin possono essere applicati a tutti i lati di un elemento o a un lato singolo.

Suggerimento:Il padding può avere valori negativi e, in molti casi, è necessario utilizzare valori negativi di padding.

Compatibilità dei browser

Una volta impostato correttamente il DTD per la pagina, la maggior parte dei browser presenteranno il contenuto come illustrato nell'immagine sopra. Tuttavia, IE 5 e 6 presentano un comportamento errato. Secondo lo standard W3C, lo spazio occupato dal contenuto dell'elemento è determinato dall'attributo width, mentre i valori di padding e border attorno al contenuto sono calcolati separatamente. Sfortunatamente, IE5.X e 6 utilizzano un modello non standard nel modalità di compatibilità. L'attributo width di questi browser non rappresenta la larghezza del contenuto, ma la somma della larghezza del contenuto, del padding e del border.

C'è un modo per risolvere questo problema. Tuttavia, la migliore soluzione attuale è evitare il problema. Questo significa, non aggiungere margini interni con larghezza specificata agli elementi, ma cercare di aggiungere margini interni o esterni agli elementi genitori e figli.

Traduzione dei termini

  • element: elemento.
  • padding: margine interno, alcuni documenti lo traducono anche in riempimento.
  • border: bordo.
  • margin: margine esterno, alcuni documenti lo traducono anche in spazio o margine vuoto.

Su codew3c, chiamiamo padding e margin in modo uniforme margine interno e margine esterno. Lo spazio all'interno del bordo è il margine interno, lo spazio all'esterno del bordo è il margine esterno, è facile ricordare, giusto? :)