• 15 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 19/01/2023

Découvrez le modèle des boîtes

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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 :

Les balises de type block, comme les balises de paragraphe, forment des blocs, ils s'enchaînent les uns après les autres. Alors qu'une balise inline, comme la balise a pour un lien hypertexte, peut être à l'intérieur d'une balise de type block.

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 :

Grâce à la couleur de fond bleue ajoutée en arrière plan des balises de titre et de paragraphe, on peut voir que les blocs de ces deux balises prennent bien toute la largeur de la page, et ce, même si le texte est très court.
Les blocs prennent toute la largeur disponible

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 :

Le bloc de la balise de titre prend toujours toute la largeur, tandis que celui du paragraphe n'en prend que la moitié.
Le bloc paragraphe prend 50 % de la largeur disponible

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) :

L'espace entre le texte et la bordure correspond à la marge intérieure. L'espace entre la bordure et le bloc suivant est la marge extérieure.
Les 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 :

On voit deux paragraphes auxquels on a appliqué un fond jaune ; le reste de la page a un fond blanc. Cela permet de voir que, par défaut, les paragraphes sont centrés sur la gauche et que les balises p qui sont de type block ont une marge automatique.
Les paragraphes sont séparés d'une marge par défaut

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 :

On voit toujours les deux paragraphes sur fond jaune, centrés sur la gauche et séparés d'un retour à la ligne qu'on voit en blanc ; mais on peut voir en plus maintenant qu'il y a une marge intérieure entre le texte et les bords du bloc de paragraphe.
Les paragraphes ont un padding de 16px

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 :

On voit les deux paragraphes sur fond jaune avec leur padding. On voir aussi que la marge extérieure par défaut a été augmentée avec un margin de 50px. L'espace entre les paragraphes mais aussi autour est plus important.
Les paragraphes ont un margin de 50px et un padding de 16px

Mais ??? Une marge s'est rajoutée tout autour aussi, pas seulement entre les deux paragraphes !?

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 :

On peut spécifier différents types de marges intérieures et extérieures pour un élément, comme par exemple une marge intérieure en haut ou encore une marge extérieure à droite.
Les différents types de marges intérieures et extérieures

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 :

On voit deux paragraphes auxquels on a appliqué un fond jaune ; le reste de la page a un fond blanc. Grâce au margin auto les paragraphes sont maintenant au centre de la page.
Les paragraphes sont centrés sur la page

À 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 !

Exemple de certificat de réussite
Exemple de certificat de réussite