Corsi on-line

Uso combinato di box-sizing e overflow per il box model in CSS

Le proprietà box-sizing e overflow di CSS possono essere utilizzate per definire velocemente dei div-box anche nel caso in cui si preveda un annidamento; nel caso speficico di questo post utilizzeremo i costrutti basati su di esse per realizzare due contenitori, uno vuoto e l’altro destinato a contenere un ulteriore div-box avente la medesima distanza (margine) da tutti i lati del box nel quale è stato inserito. Sostanzialmente il nosto obiettivo sarà quello di ottenere un output come il seguente:

container

box-sizing permette di definire in che modo un elemento debba essere inserito all’interno di una determinata area, associando a tale proprietà l’attributo border-box si potrà forzare il browser a restituire una div-box rispettando anche per il padding e i margini dal bordo la larghezza e l’altezza specificate. overflow è invece una proprietà che specifica cosa debba accadere nel caso in cui un contenuto possa eccedere l’elemento di un box; l’attributo auto autorizzerà lo scrolling per il rendering dei contenuti non visibili.

Detto questo, per ottenere un risultato come quello mostrato nella figura precedente, potremo definire delle regole di stile come le seguenti:

* {
  box-sizing: border-box;
}
* {
  overflow: auto;
}
.box {
  background: red;
  margin: 12px;
}
#inbox {
  background: yellow;
  margin: 12px;
}

Tale CSS potrà essere utilizzato in questo modo all’interno del markup HTML:

<div class="box">
 Container vuoto
</div>
<div class="box">
  <div id="inbox">Div-box annidato</div>
</div>

Chiaramente, la stessa procedura descritta in questo post potrà essere utilizzata per annidare ulteriori div-box all’interno del container principale.

Post correlati
I più letti del mese
Tematiche