Sommaire

Le remplissage intérieur

1. Le remplissage par défaut

Par défaut il y a un espace intérieur dans les blocs, c’est-à-dire que le contenu ne "touche" pas les bords des blocs. Cet espace est défini avec la propriété padding dans les classes .columns et .column.

.column, .columns { 
  width: 100%; 
  float: left; 
  padding-left: 0.9375rem; 
  padding-right: 0.9375rem; 
}

Nous avons un remplissage intérieur à gauche et à droite de 0,9375 rem.

images/C03-016.png

2. Supprimer le remplissage

Vous pouvez parfaitement décider de supprimer ce remplissage pour une taille d’écran spécifiée. Pour cela, dans les lignes concernées (<div class="row">), utilisez la classe .[size]-collapse, où le préfixe [size] indique la taille de l’écran ciblé. Par exemple large-collapse indique qu’il ne doit y avoir de remplissage intérieur uniquement pour les écrans larges.

Voici le code HTML de cet exemple :

<div class="row large-collapse"> 
  <div class="small-2 columns jaune"> 
     <p>Cum sociis natoque...</p> 
  </div> 
  <div class="small-4 columns bleu"> 
     <p>Cras justo odio...</p> 
  </div> 
  <div class="small-6 columns vert"> 
     <p>Sed posuere consectetur...</p>  ...