Découvrez le modèle des boîtes

Différencier les balises de type  block  et de type  inline

En HTML, la plupart des balises peuvent se ranger dans l'une ou l'autre de ces deux catégories :

• block: ce type de balise crée automatiquement un retour à la ligne avant et après ; 

• inline: ce type se trouve obligatoirement à l'intérieur d'une balise  block  . 

Pour bien visualiser le concept, voici un petit schéma :

Comme vous pouvez le voir, les blocs sont les uns en dessous des autres. On peut aussi les imbriquer les uns à l'intérieur des autres : souvenez-vous, un bloc  <main>  contient par exemple des blocs  <section>  , qui eux-mêmes peuvent contenir des  <div> .

Quant à la balise  <a></a>  (qui est de type  inline  ), elle se trouve à l'intérieur d'une balise  block  , et le texte vient s'insérer sur la même ligne.

Faites bon usage des balises universelles <span>  et  <div>

J'en profite pour vous parler à nouveau des balises universelles. Vous les connaissez déjà car je vous les ai présentées à plusieurs reprises. Ce sont des balises qui n'ont aucun sens particulier. Le principal intérêt de ces balises est que l'on peut leur appliquer une  class  (ou un  id  ) pour le CSS quand aucune autre balise ne convient.

Il existe deux balises génériques et, comme par hasard, la seule différence entre les deux est que l'une d'elles est  inline  et l'autre est  block  :

1. La balise<span>(qui est de type inline).

2. La balise<div>(qui est de type block).

Le résultat visuel est le même, mais les balises génériques n'apportent aucun sens à la page, et ne peuvent pas être comprises par l'ordinateur. Utilisez toujours d'autres balises plus adaptées quand c'est possible.

Maintenant que vous comprenez la différence entre inline et block , nous allons apprendre à dimensionner des éléments en CSS ! Nous allons ici travailler uniquement sur des balises de type  block  .

Pour commencer, intéressons-nous à la taille des blocs.

Dimensionnez les éléments avec width et height

Contrairement à un  inline  , un  block  peut avoir une largeur et une hauteur précises grâce à ces deux propriétés CSS :

1. width  (largeur du bloc).

2. height  (hauteur du bloc).

On les exprime en pixels px ou en pourcentage %.

On peut le vérifier en appliquant à nos blocs des bordures ou une couleur de fond :

Maintenant, rajoutons un peu de CSS afin de modifier la largeur des paragraphes. Si on veut que tous les paragraphes aient une largeur de 50 %, on écrira en CSS :

p {  
    width: 50%;
}

Le résultat est visible juste en dessous :

Toutefois, il se peut que vous ayez besoin de créer des blocs ayant une dimension précise en pixels, par exemple pour reprendre un design très précis. Essayez le bout de code suivant pour voir :

p {
    width: 250px;
}

Définissez des marges avec margin et padding

Tous les blocs possèdent des marges (intérieures et extérieures) :

En CSS, on peut modifier la taille des marges avec deux propriétés :

1. margin  (taille de la marge extérieure)

2. padding  (taille de la marge intérieure).

Pour bien comprendre la différence, faisons quelques tests.

Pour l'occasion, j'ai rédigé dans le fichier HTML des paragraphes de texte en lorem ipsum (du faux texte). Ensuite, dans le fichier CSS, j'ai donné au bloc  p  une largeur de  350px  et j'ai ajouté une couleur jaune avec la balise  background-color  pour qu'on visualise bien la différence entre les différentes marges :

p {
    width: 350px;
    background-color: #F1C864;
    text-align: justify;
}

Voilà ce qu'on obtient avec ce code :

Comme vous pouvez le constater, il n'y a par défaut pas de marge intérieure (padding  ) dans le bloc du paragraphe, (on le voit bien car il a un fond jaune et que les bordures sont collées au texte).

En revanche, il y a une marge extérieure (margin  ), on la voit bien car elle espace les paragraphe entre eux, avec une marge blanche (couleur du fond de la page par défaut). C'est cette marge qui fait que deux paragraphes ne sont pas collés, et qu'on a l'impression de “sauter une ligne”.

Ajoutez une marge intérieure avec la propriété CSS  padding

Pour ajouteraux paragraphes une marge intérieure (padding) de  16px  par exemple, on écrit :

p {
    width: 350px;
    background-color: #F1C864;
    text-align: justify;
    padding: 16px;
}

On obtient alors :

Ajoutez une marge extérieure avec la propriété CSS  margin

Maintenant, si on veut que nos paragraphes soient encore plus espacés entre eux, on rajoute la propriété margin  . Demandons par exemple  50px  de marge entre deux paragraphes :

p {
    width: 350px;
    background-color: #F1C864;
    text-align: justify;
    padding: 16px;
    margin: 50px;
}

On obtient :

Eh oui, margin  (comme padding  d'ailleurs) s'applique aux quatre côtés du bloc.

Si vous voulez spécifier des marges différentes en haut, en bas, à gauche et à droite, il va falloir utiliser des propriétés plus précises… Le principe est le même que pour la propriété  border, vous allez voir !

Spécifiez les propriétés margin et padding 

Vous allez avoir besoin d'un minimum de vocabulaire en anglais ici :

• top: haut ;

• bottom: bas ;

• left: gauche ;

• right : droite.

Voyez ce que cela donne dans le schéma ci-dessous :

Centrez vos blocs avec  width  et  margin: auto;

Pour centrer des blocs, il faut respecter les règles suivantes :

1. donner une largeur au bloc avec la propriété width ;

2. indiquer  margin: auto; (les marges extérieures seront alors automatiques, et permettront de centrer le contenu.

Essayons cette technique sur nos paragraphes, en ajoutant simplement une ligne au CSS :

p {
    width: 350px;
    background-color: #F1C864;
    text-align: justify;
    padding: 16px;
    margin: auto;
}

Et on obtient :

À vous de jouer !

Vous allez maintenant pouvoir vous faire la main sur le site de Robbie Lens, et mettre en pratique ce que vous venez d'apprendre ! Dans la branche de départ de l'exercice, vous trouverez un bout de CSS qui indique :

* {
    margin: 0;
}

Cela sert à réinitialiser les marges par défaut des navigateurs.

À partir de là, vous allez :

• ajouter unpaddingau  header  et au  footer  de  20px  en haut et en bas, et de  50px  à gauche et à droite ;

• ajouter une section autour du contenu de la page d'accueil ;

• ajouter une section autour du contenu de la page  A-propos  ;

• donner à vos sections (pour les futures sections à venir) un padding de  80px  ;

• créer un padding de  50px  pour  carre-contenu  ;

• centrer le contenu de la page  A-propos  ;

• aérer le contenu de la page   A-propos  : mettre de la marge au-dessus du sous-titre "Services" et de la liste des compétences. 

En résumé

• On distingue deux principaux types de balises en HTML :

  • les balises de type  block  comme  <p>  ou  <h1> créent un retour à la ligne et occupent par défaut toute la largeur disponible. Elles se suivent de haut en bas ;

  • les balises de type  inline  comme  <a>  ou  <strong>  délimitent du texte au milieu d'une ligne. Elles se suivent de gauche à droite.

• On peut modifier la taille d'une balise de type block  avec les propriétés CSS  width (largeur) et  height  (hauteur).

• Les éléments de la page disposent chacun de padding (marges intérieures) et de margin  (marges extérieures).

• On peut centrer le contenu d'un bloc dont la largeur est définie par width avec margin: auto;

Ça va ? Vous avez bien digéré toutes les informations ? Alors accrochez-vous ! Dans le chapitre suivant, on va voir une partie essentielle du CSS moderne : Flexbox. Alors à tout de suite !