corrections coquilles (#2048)

* corrections coquilles

* Update index.html

* UPDT: l10n-en to l10n-fr, fix typos, rmv macros

* Missing final sentence in English

Co-authored-by: tristantheb <tristantheb@users.noreply.github.com>
Co-authored-by: SphinxKnight <SphinxKnight@users.noreply.github.com>

1 files changed, 66 insertions, 66 deletions

diff --git a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html
index 2fdf39d902..47e0ee79a1 100644
--- a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html
+++ b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html
@@ -6,131 +6,131 @@ original_slug: Apprendre/CSS/Building_blocks/Sizing_items_in_CSS
 ---
 <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div>
 
-<div></div>
-
-<div>Dans les différentes leçons vues jusqu'à présent vous avez rencontré de nombreuses manières de dimensionner les éléments sur une page en utlisant CSS. Comprendre le dimensionnement des différentes caractéristiques de votre design est important. Cette leçon résumera les diverses méthodes pour appliquer une taille via CSS et définira également quelques termes au sujet du dimensionnement qui vous aiderons dans le futur.</div>
-
-<div></div>
+<div>Dans les différentes leçons vues jusqu'à présent vous avez rencontré de nombreuses manières de dimensionner les éléments sur une page en utilisant CSS. Comprendre le dimensionnement des différentes caractéristiques de votre design est important. Cette leçon résumera les diverses méthodes pour appliquer une taille via CSS et définira également quelques termes au sujet du dimensionnement qui vous aideront dans le futur.</div>
 
 <table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prérequis:</th>
-   <td>
-    <p>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML  (cf. <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Objectif:</th>
-   <td>Découvrir comment spécifier la taille des éléments en CSS.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis :</th>
+      <td>
+        <p>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps">Comment fonctionne CSS</a>.</p>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif :</th>
+      <td>Découvrir comment spécifier la taille des éléments en CSS.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="La_taille_naturelle_ou_intrinsèque_des_choses">La taille naturelle ou intrinsèque des choses</h2>
+<h2 id="the_natural_or_intrinsic_size_of_things">La taille naturelle ou intrinsèque des choses</h2>
 
-<p>Tous les éléments HTML ont une taille "naturelle", définie avant toute modification par CSS. Un exemple parlant est celui d'un élément image. Une image a une largeur et une hauteur définies dans le fichier image qu'elle incorpore dans la page. On parle d'une <strong>taille intrinsèque </strong>— qui provient de l'image elle même.</p>
+<p>Tous les éléments HTML ont une taille « naturelle », définie avant toute modification par CSS. Un exemple parlant est celui d'un élément image. Une image a une largeur et une hauteur définies dans le fichier image qu'elle incorpore dans la page. On parle d'une <strong>taille intrinsèque </strong>— qui provient de l'image elle-même.</p>
 
-<p>Si vous placer une image dans une page sans modifier sa hauteur ni sa largeur (que ce soit à en utilisant un attribut sur la balise <code>&lt;img&gt;</code> ou avec CSS), cela l'affichera en utilisant sa taille intrasèque. Ci-dessous nous avons l'exemple d'une image à laquelle nous avons ajouté une bordure afin de bien délimiter sa taille.</p>
+<p>Si vous placez une image dans une page sans modifier sa hauteur ni sa largeur (que ce soit à en utilisant un attribut sur la balise <code>&lt;img&gt;</code> ou avec CSS), cela l'affichera en utilisant sa taille intrinsèque. Ci-dessous nous avons l'exemple d'une image à laquelle nous avons ajouté une bordure afin de bien délimiter sa taille.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p>
 
-<p>Un élément {{htmlelement("div")}} vide en revanche, n'a pas de taille en soi. Si vous ajouter une {{htmlelement("div")}} à votre HTML sans aucun contenu à l'intérieur,et que vous lui ajouter une bordure comme nous l'avons fait avec l'image ci-dessus, vous verrez une ligne s'afficher sur la page. Cette ligne résulte de la juxtaposition des bordures horizontales, car il n'y a aucun contenu entre les deux. De plus les bordures s'étendent sur toute la largeur disponible du conteneur, car il s'agit d'un élément de bloc. Un comportement avec lequel vous devriez déjà être familiarisé. Cet élément n'a pas de hauteur (ou plutôt pas de taille dans l'axe de bloc) car il n'y a pas de contenu à l'interieur de celui ci.</p>
+<p>Un élément <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a> vide en revanche, n'a pas de taille en soi. Si vous ajouter une <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a> à votre HTML sans aucun contenu à l'intérieur, et que vous lui ajouter une bordure comme nous l'avons fait avec l'image ci-dessus, vous verrez une ligne s'afficher sur la page. Cette ligne résulte de la juxtaposition des bordures horizontales, car il n'y a aucun contenu entre les deux. De plus les bordures s'étendent sur toute la largeur disponible du conteneur, car il s'agit d'un élément de bloc. Un comportement avec lequel vous devriez déjà être familiarisé. Cet élément n'a pas de hauteur (ou plutôt pas de taille dans l'axe de bloc), car il n'y a pas de contenu à l'intérieur de celui-ci.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p>
 
-<p>Dans l'exemple ci-dessus; essayez d'ajouter du texte a l'interieur de l'élément vide. Les bordures contiennent maintenant ce texte car la hauteur de l'élément est définie par son contenu. De plus, la taille de cette <code>&lt;div&gt;</code> dans l'axe de bloc provient maintenant de la taille du contenu. Là aussi il s'agit de la taille intrasèque de l'élément — sa taille est définie par son contenu.</p>
+<p>Dans l'exemple ci-dessus; essayez d'ajouter du texte à l'intérieur de l'élément vide. Les bordures contiennent maintenant ce texte, car la hauteur de l'élément est définie par son contenu. De plus, la taille de cette <code>&lt;div&gt;</code> dans l'axe de bloc provient maintenant de la taille du contenu. Là aussi il s'agit de la taille intrinsèque de l'élément — sa taille est définie par son contenu.</p>
 
-<h2 id="Spécifier_une_taille">Spécifier une taille</h2>
+<h2 id="setting_a_specific_size">Spécifier une taille</h2>
 
-<p>Nous pouvons bien entendu donner une taille spécifique aux éléments. Quand une taille est ainsi donnée à un élément (et que son contenu est adapté à cette taille), nous parlons de <strong>taille extrinsèque</strong>. Reprenons notre <code>&lt;div&gt;</code> de l'exemple précédent — nous pouvons lui donner une  {{cssxref("width")}} spécifique et une {{cssxref("height")}} spécifique, l'élément à désormais une taille définie peu importe ce qui est placé à l'interieur de celui ci. Comme nous l'avons appris dans <a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">notre précédente leçon sur le concept d'overflow,</a> une hauteur définie peut générer un débordement du contenu si celui ci est plus important que l'espace alloué par son conteneur.</p>
+<p>Nous pouvons bien entendu donner une taille spécifique aux éléments. Quand une taille est ainsi donnée à un élément (et que son contenu est adapté à cette taille), nous parlons de <strong>taille extrinsèque</strong>. Reprenons notre <code>&lt;div&gt;</code> de l'exemple précédent — nous pouvons lui donner une <a href="/fr/docs/Web/CSS/width"><code>width</code></a> spécifique et une <a href="/fr/docs/Web/CSS/height"><code>height</code></a> spécifique, l'élément a désormais une taille définie peu importe ce qui est placé à l'intérieur de celui-ci. Comme nous l'avons appris dans <a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">notre précédente leçon sur le concept d'overflow,</a> une hauteur définie peut générer un débordement du contenu si celui-ci est plus important que l'espace alloué par son conteneur.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p>
 
 <p>Du fait de ce comportement parfois inattendu, fixer la hauteur d'un élément avec une longueur ou en pourcentage est une pratique à utiliser avec parcimonie sur le web.</p>
 
-<h3 id="Avec_les_pourcentages">Avec les pourcentages</h3>
+<h3 id="using_percentages">Avec les pourcentages</h3>
 
-<p>De bien des manières, les pourcentages agissent de la même manière que les unités de longueur, et comme nous l'avons vu dans <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">la leçon sur les valeurs et unités en CSS</a>, ils peuvent souvent être utilisés de manière interchangeable avec les unités de longueur. Lorsque vous utilisez les pourcentages vous devez seulement être conscient de la valeur auquelle se réfère le pourcentage. Si vous donnez à un bloc enfant une largeur définie en pourcentage, celui ci correspond à un pourcentage de la largeur du conteneur parent.</p>
+<p>De bien des manières, les pourcentages agissent de la même manière que les unités de longueur, et comme nous l'avons vu dans <a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">la leçon sur les valeurs et unités en CSS</a>, ils peuvent souvent être utilisés de manière interchangeable avec les unités de longueur. Lorsque vous utilisez les pourcentages vous devez seulement être conscient de la valeur à laquelle se réfère le pourcentage. Si vous donnez à un bloc enfant une largeur définie en pourcentage, celui-ci correspond à un pourcentage de la largeur du conteneur parent.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p>
 
-<p>En effet, les pourcentages sont determinés en fonction de la taille de l'élément parent. Si aucun pourcentage n'est spécifié, notre <code>&lt;div&gt;</code> prendra 100% de l'espace disponible (car il s'agit du comportement par défaut d'un élément de type bloc). En revanche si nous lui donnons une largeur en pourcentage, ce pourcentage fera référence à l'espace que la <code>&lt;div</code><code>&gt;</code> aurait normalement occupé dans l'élément parent.</p>
+<p>En effet, les pourcentages sont déterminés en fonction de la taille de l'élément parent. Si aucun pourcentage n'est spécifié, notre <code>&lt;div&gt;</code> prendra 100% de l'espace disponible (car il s'agit du comportement par défaut d'un élément de type bloc). En revanche si nous lui donnons une largeur en pourcentage, ce pourcentage fera référence à l'espace que la <code>&lt;div</code><code>&gt;</code> aurait normalement occupé dans l'élément parent.</p>
 
-<h3 id="Marges_et_remplissage_en_pourcentages">Marges et remplissage en pourcentages</h3>
+<h3 id="percentage_margins_and_padding">Marges et remplissage en pourcentages</h3>
 
-<p>Si vous définissez les <code>margins</code> (marges exterieurs) et les <code>paddings</code> (marges intérieurs) avec des pourcentages, vous noterez un comportement inattendu. Dans l'exemple ci-dessous nous avons une boite. Nous avons défini la propriété {{cssxref("margin")}} à 10% et la propriété {{cssxref("padding")}} à 10% également. Les marges intérieurs et exterieurs sur le haut et le bas de la boite ont la même taille que les marges extérieurs sur la gauche et la droite.</p>
+<p>Si vous définissez les <code>margins</code> (marges extérieures) et les <code>paddings</code> (marges intérieurs) avec des pourcentages, vous noterez un comportement inattendu. Dans l'exemple ci-dessous nous avons une boite. Nous avons défini la propriété <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> à 10% et la propriété <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a> à 10% également. Les marges intérieures et extérieures sur le haut et le bas de la boite ont la même taille que les marges extérieures sur la gauche et la droite.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p>
 
-<p>You might expect for example the percentage top and bottom margins to be a percentage of the element's height, and the percentage left and right margins to be a percentage of the element's width. However, this is not the case!</p>
+<p>On pourrait s'attendre, par exemple, à ce que le pourcentage des marges supérieures et inférieures soit un pourcentage de la hauteur de l'élément, et que le pourcentage des marges gauche et droite soit un pourcentage de la largeur de l'élément. Or, ce n'est pas le cas !</p>
 
-<p>When you use margin and padding set in percentages, the value is calculated from the<strong> inline size</strong> — therefore the width when working in a horizontal language. In our example, all of the margins and padding are 10% of the width. This means you can have equal sized margins and padding all round the box. This is a fact worth remembering if you do use percentages in this way.</p>
+<p>Lorsque vous utilisez des marges et des remplissages définis en pourcentages, la valeur est calculée à partir de la <strong>taille en ligne</strong> — donc de la largeur lorsque vous travaillez dans un langage horizontal. Dans notre exemple, toutes les marges et tous les renforts représentent 10 % de la largeur. Cela signifie que vous pouvez avoir des marges et un remplissage de taille égale tout autour de la boîte. C'est un fait dont il faut se souvenir si vous utilisez les pourcentages de cette manière.</p>
 
-<h2 id="tailles_min-_et_max-">tailles min- et max- </h2>
+<h2 id="min-_and_max-_sizes">Tailles min- et max-</h2>
 
-<p>In addition to giving things a fixed size, we can ask CSS to give an element a minimum or a maximum size. If you have a box that might contain a variable amount of content, and you always want it to be <em>at least</em> a certain height, you could set the {{cssxref("min-height")}} property on it. The box will always be at least this height, but will then grow taller if there is more content than the box has space for at its minimum height.</p>
+<p>En plus de donner aux choses une taille fixe, nous pouvons demander à CSS de donner à un élément une taille minimale ou maximale. Si vous avez une boîte qui pourrait contenir une quantité variable de contenu, et que vous voulez toujours qu'elle ait <em>au moins</em> une certaine hauteur, vous pourriez lui attribuer la propriété <a href="/fr/docs/Web/CSS/min-height"><code>min-height</code></a>. La boîte sera toujours, au minimum, de cette hauteur, mais deviendra plus grande s'il y a plus de contenu que la boîte que sa hauteur minimale.</p>
 
-<p>In the example below you can see two boxes, both with a defined height of 150 pixels. The box on the left is 150 pixels tall; the box on the right has content that needs more room, and so it has grown taller than 150 pixels.</p>
+<p>Dans l'exemple ci-dessous, vous pouvez voir deux boîtes, toutes deux ayant une hauteur définie de 150 pixels. La boîte de gauche a une hauteur de 150 pixels ; la boîte de droite a un contenu qui a besoin de plus d'espace, et elle est donc devenue plus haute que 150 pixels.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p>
 
-<p>This is very useful for dealing with variable amounts of content while avoiding overflow.</p>
+<p>C'est très utile pour traiter des quantités variables de contenu tout en évitant les débordements.</p>
 
-<p>A common use of {{cssxref("max-width")}} is to cause images to scale down if there is not enough space to display them at their intrinsic width, while making sure they don't become larger than that width.</p>
+<p>Une utilisation courante de <a href="/fr/docs/Web/CSS/max-width"><code>max-width</code></a> consiste à faire en sorte que les images soient réduites si l'espace est insuffisant pour les afficher à leur largeur intrinsèque, tout en s'assurant qu'elles ne deviennent pas plus grandes que cette largeur.</p>
 
-<p>As an example, if you were to set <code>width: 100%</code> on an image, and its intrinsic width was smaller than its container, the image would be forced to stretch and become larger, causing it to look pixellated. If its intrinsic width were larger than its container, it would overflow it. Neither case is likely to be what you want to happen.</p>
+<p>À titre d'exemple, si vous définissiez <code>width: 100%</code> sur une image, et que sa largeur intrinsèque était inférieure à son conteneur, l'image serait forcée de s'étirer et de s'agrandir, ce qui lui donnerait un aspect pixelisé. Si sa largeur intrinsèque était supérieure à celle de son conteneur, elle le déborderait. Aucun des deux cas n'est susceptible de correspondre à ce que vous souhaitez.</p>
 
-<p>If you instead use <code>max-width: 100%</code>, the image is able to become smaller than its intrinsic size, but will stop at 100% of its size.</p>
+<p>Si vous utilisez plutôt <code>max-width : 100%</code>, l'image est capable de devenir plus petite que sa taille intrinsèque, mais s'arrêtera à 100% de sa taille.</p>
 
-<p>In the example below we have used the same image twice. The first image has been given <code>width: 100%</code> and is in a container which is larger than it, therefore it stretches to the container width. The second image has <code>max-width: 100%</code> set on it and therefore does not stretch to fill the container. The third box contains the same image again, also with <code>max-width: 100%</code> set; in this case you can see how it has scaled down to fit into the box.</p>
+<p>Dans l'exemple ci-dessous, nous avons utilisé trois fois la même image. La première image a reçu le <code>width: 100%</code> et se trouve dans un conteneur plus grand qu'elle, elle s'étire donc à la largeur du conteneur. La deuxième image a été dotée du <code>max-width : 100%</code> et ne s'étire donc pas pour remplir le conteneur. La troisième boîte contient à nouveau la même image, également avec <code>max-width : 100%</code> défini ; dans ce cas, vous pouvez voir comment elle a été réduite pour entrer dans le conteneur.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p>
 
-<p>This technique is used to make images <em>responsive</em>, so that when viewed on a smaller device they scale down appropriately. You should however not use this technique to load in really large images and then scale them down in the browser. Images should be appropriately sized to be no larger than they need to be for the largest size they are displayed in the design. Downloading overly large images will cause your site to become slow, and it can cost users more money if they are on a metered connection.</p>
+<p>Cette technique est utilisée pour rendre les images <em>responsive</em>, de sorte que lorsqu'elles sont visualisées sur un appareil plus petit, elles sont réduites de manière appropriée. Vous ne devez cependant pas utiliser cette technique pour charger des images vraiment grandes et les réduire ensuite dans le navigateur. Les images doivent être correctement dimensionnées pour ne pas être plus grandes qu'elles ne doivent l'être pour la plus grande taille à laquelle elles sont affichées dans la conception. Le téléchargement d'images trop grandes ralentira votre site et peut coûter plus cher aux utilisateurs s'ils disposent d'une connexion limitée.</p>
 
-<div class="blockIndicator note">
-<p><strong>Note </strong>: Find out more about <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive image techniques</a>.</p>
+<div class="notecard note">
+  <p><b>Note :</b> En savoir plus sur <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">les techniques d'images responsives</a>.</p>
 </div>
 
-<h2 id="Unités_de_la_fenêtre_daffichage">Unités de la fenêtre d'affichage</h2>
+<h2 id="viewport_units">Unités de la fenêtre d'affichage</h2>
 
-<p>La fenêtre — la surface de la page montrée par le navigateur lorsqu'on navigue sur un site — a aussi des dimensions. Certaines unités CSS sont dédiées à la description des dimensions de la fenêtre —  <code>vw</code> pour <em>viewport width</em> (largeur de la fenêtre), et <code>vh</code> pour <em>viewport height </em>(hauteur de la fenêtre). Grâce à ces unités vous pouvez dimensionner un objet en fonction de la fenêtre de l'utilisateur.</p>
+<p>La fenêtre — la surface de la page montrée par le navigateur lorsqu'on navigue sur un site — a aussi des dimensions. Certaines unités CSS sont dédiées à la description des dimensions de la fenêtre — <code>vw</code> pour <em>viewport width</em> (largeur de la fenêtre), et <code>vh</code> pour <em>viewport height </em>(hauteur de la fenêtre). Grâce à ces unités vous pouvez dimensionner un objet en fonction de la fenêtre de l'utilisateur.</p>
 
-<p><code>1vh</code> correspond à 1% dela hauteur de la fenêtre, <code>1vw</code> à 1% sa largeur. Avec ces unités, on peut dimensionner des boîtes aussi bien que du texte. Dans l'exemple ci-dessous, la boîte a pour dimensions 20vh et 20vw. Elle contient la lettre <code>A</code>, de {{cssxref("font-size")}} 10vh.</p>
+<p><code>1vh</code> correspond à 1% de la hauteur de la fenêtre, <code>1vw</code> à 1% sa largeur. Avec ces unités, on peut dimensionner des boîtes aussi bien que du texte. Dans l'exemple ci-dessous, la boîte a pour dimensions 20vh et 20vw. Elle contient la lettre <code>A</code>, de <a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a> 10vh.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p>
 
-<p><strong>If you change the <code>vh</code> and <code>vw</code> values this will change the size of the box or font; changing the viewport size will also change their sizes because they are sized relative to the viewport. To see the example change when you change the viewport size you will need to load the example in a new browser window that you can resize (as the embedded <code>&lt;iframe&gt;</code> that contains the example shown above is its viewport). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Open the example</a>, resize the browser window, and observe what happens to the size of the box and text.</strong></p>
+<p>Si vous changez les valeurs <code>vh</code> et <code>vw</code>, cela modifiera la taille du conteneur ou de la police ; changer la taille de la fenêtre modifiera également leurs tailles, car elles sont dimensionnées par rapport à la fenêtre de vue. Pour voir l'exemple changer lorsque vous modifiez la taille de la fenêtre, vous devrez charger l'exemple dans une nouvelle fenêtre de navigateur que vous pouvez redimensionner (car le <code>&lt;iframe&gt;</code> intégré qui contient l'exemple montré ci-dessus est sa fenêtre de vue). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Ouvrez l'exemple</a>, redimensionnez la fenêtre du navigateur et observez ce qui se passe pour la taille de la boîte et du texte.</p>
+
+<p>Dimensionner les objets en fonction de la fenêtre peut s'avérer utile. Par exemple, pour afficher la section principale en pleine page, il suffit de lui attribuer 100vh, cela poussera le reste du contenu sous la fenêtre ; le reste du contenu n'apparaîtra qu'en la faisant défiler.</p>
+
+<h2 id="test_your_skills">Testez vos compétences !</h2>
 
-<p>Dimensionner les objets en fonction de la fenêtre peut s'avérer utile. Par exemple, pour afficher la section principale en pleine page, il suffit de lui attribuer 100vh, cela poussera le reste du contenu sous la fenêtre ; le reste du contenu n'apparaîtra qu'en la faisant défiler.</p>
+<p>Nous avons abordé beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez retenu ces informations avant de passer à autre chose — voir <a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_tasks">Tester vos compétences : Dimensionnement</a>.</p>
 
-<h2 id="Résumé">Résumé</h2>
+<h2 id="summary">Résumé</h2>
 
-<p>Cette leçon a voulu vous sensibiliser aux difficultés principales qu'on rencontre dès qu'on veut donner une dimension aux objets sur le Web. When you move onto <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS Layout</a>, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on.</p>
+<p>Cette leçon a voulu vous sensibiliser aux difficultés principales qu'on rencontre dès qu'on veut donner une dimension aux objets sur le Web. Lorsque vous verrez <a href="/fr/docs/Learn/CSS/CSS_layout">les dispositions en CSS</a>, le dimensionnement deviendra crucial pour maîtriser les différents modes de disposition : autant en comprendre les concepts avant d'aller plus loin.</p>
 
 <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p>
 
-<h2 id="Dans_ce_cours">Dans ce cours</h2>
+<h2 id="in_this_module">Dans ce module</h2>
 
 <ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a>
   <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe et d'ID</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attributs</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li>
+   <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li>
   </ul>
  </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrière-plans et bordures</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Débordements de contenu</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Définir la taille des éléments en CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias et éléments de formulaire</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mise en page de tableaux</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Débogage de CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser votre CSS</a></li>
 </ol>