{"id":5357,"date":"2024-08-27T16:45:26","date_gmt":"2024-08-27T16:45:26","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/interlignes-espacements-texte-css\/"},"modified":"2024-11-11T16:06:51","modified_gmt":"2024-11-11T16:06:51","slug":"interlignes-espacements-texte-css","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/interlignes-espacements-texte-css\/","title":{"rendered":"4.4 Interlignes et Espacements de Texte en CSS"},"content":{"rendered":"\n\n\n<p><strong>Interlignes et Espacements de Texte en CSS<\/strong> sont des aspects fondamentaux de la mise en page web. Une bonne gestion de l&rsquo;interligne et des espacements de texte peut consid\u00e9rablement am\u00e9liorer la lisibilit\u00e9 et l&rsquo;esth\u00e9tique de votre site. Apprenons comment utiliser ces propri\u00e9t\u00e9s gr\u00e2ce \u00e0 des exemples concrets de code CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Interlignes et Espacements de Texte en CSS<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586311879?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPrice.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>En CSS, l&rsquo;interligne est principalement contr\u00f4l\u00e9 par la propri\u00e9t\u00e9 <code>line-height<\/code>. L&rsquo;espacement de texte, quant \u00e0 lui, peut \u00eatre ajust\u00e9 avec plusieurs propri\u00e9t\u00e9s, notamment <code>letter-spacing<\/code> et <code>word-spacing<\/code>. Ces outils permettent de cr\u00e9er un design harmonieux et confortable pour le lecteur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la Propri\u00e9t\u00e9 <code>line-height<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>line-height<\/code> g\u00e8re l&rsquo;espacement vertical entre les lignes d&rsquo;un paragraphe. En d\u00e9finissant une hauteur de ligne appropri\u00e9e, vous pouvez am\u00e9liorer la lisibilit\u00e9 globale de votre texte. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p {\n    font-size: 16px;\n    line-height: 1.5;\n}<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, chaque ligne de texte aura 1.5 fois la hauteur de la taille de la police, cr\u00e9ant ainsi un espace suffisant pour une lecture confortable. Pour plus de d\u00e9tails sur cette propri\u00e9t\u00e9, consultez notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/element-titre-html-explications-guide\" target=\"_blank\" rel=\"noopener\">l&rsquo;\u00e9l\u00e9ment titre en HTML<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ajuster l&rsquo;Espacement des Lettres avec <code>letter-spacing<\/code><\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>letter-spacing<\/code> contr\u00f4le l&rsquo;espace entre les caract\u00e8res d&rsquo;un texte. Cet outil peut \u00eatre particuli\u00e8rement utile pour les titres ou les effets de texte sp\u00e9cifiques :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>h1 {\n    font-size: 36px;\n    letter-spacing: 2px;\n}<\/code><\/pre>\n\n\n\n<p>Ici, chaque lettre d&rsquo;un titre <code>h1<\/code> sera s\u00e9par\u00e9e par un espace suppl\u00e9mentaire de 2 pixels, donnant un effet d&rsquo;ouverture qui peut captiver l&rsquo;attention du lecteur. Vous pouvez en apprendre davantage sur la gestion des propri\u00e9t\u00e9s CSS dans notre section compl\u00e8te sur les <a href=\"https:\/\/wikiform.fr\/codespace\/proprietes-css-texte-tout-comprendre\" target=\"_blank\" rel=\"noopener\">propri\u00e9t\u00e9s CSS pour le texte<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Contr\u00f4ler l&rsquo;Espacement des Mots avec <code>word-spacing<\/code><\/h3>\n\n\n\n<p>De m\u00eame, la propri\u00e9t\u00e9 <code>word-spacing<\/code> permet de contr\u00f4ler l&rsquo;espacement entre les mots. Cette propri\u00e9t\u00e9 est utile pour ajuster les blocs de texte plus grands :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p {\n    font-size: 16px;\n    word-spacing: 4px;\n}<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, chaque espace entre les mots dans un paragraphe sera augment\u00e9 de 4 pixels, ce qui peut am\u00e9liorer la lisibilit\u00e9 pour des paragraphes denses. Pour plus d&rsquo;informations sur la manipulation des \u00e9l\u00e9ments textuels, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/elements-textuels-html-guide-complet\" target=\"_blank\" rel=\"noopener\">guide complet sur les \u00e9l\u00e9ments textuels en HTML<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner les Propri\u00e9t\u00e9s pour un Texte Harmonieux<\/h3>\n\n\n\n<p>L&rsquo;application simultan\u00e9e de <code>line-height<\/code>, <code>letter-spacing<\/code>, et <code>word-spacing<\/code> permet de cr\u00e9er un design \u00e9quilibr\u00e9. Voici un exemple de code combin\u00e9 :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p {\n    font-size: 18px;\n    line-height: 1.6;\n    letter-spacing: 1px;\n    word-spacing: 2px;\n}<\/code><\/pre>\n\n\n\n<p>En utilisant ces valeurs, vous pouvez ajuster avec pr\u00e9cision l&rsquo;apparence de vos paragraphes, am\u00e9liorant de mani\u00e8re significative la lisibilit\u00e9 et l&rsquo;esth\u00e9tique g\u00e9n\u00e9rale de votre site. Pour aller plus loin, d\u00e9couvrez comment <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-progress-mozilla-firefox-html\" target=\"_blank\" rel=\"noopener\">utiliser des \u00e9l\u00e9ments de progression<\/a> pour enrichir vos pages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Espacements dans un Projet R\u00e9el<\/h3>\n\n\n\n<p>Pour illustrer l&rsquo;application de ces concepts dans un projet r\u00e9el, imaginons une page de blog o\u00f9 la lisibilit\u00e9 du texte est cruciale. Voici un exemple complet de code CSS :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n    font-family: Arial, sans-serif;\n    font-size: 16px;\n    line-height: 1.8;\n    letter-spacing: 0.5px;\n    word-spacing: 1.5px;\n    margin: 20px;\n}\n\nh1, h2, h3 {\n    letter-spacing: 1px;\n    margin-bottom: 10px;\n}\n\np {\n    margin-bottom: 15px;\n}\n\nblockquote {\n    font-size: 18px;\n    line-height: 1.6;\n    letter-spacing: 0.8px;\n    word-spacing: 1px;\n    border-left: 5px solid #ccc;\n    padding-left: 10px;\n    margin: 20px 0;\n}<\/code><\/pre>\n\n\n\n<p>Avec ces styles, vous pouvez garantir que chaque \u00e9l\u00e9ment de texte dispose d&rsquo;un espacement suffisant permettant au lecteur de se concentrer sur le contenu sans \u00eatre g\u00ean\u00e9 par une pr\u00e9sentation d\u00e9sordonn\u00e9e. Pour en savoir plus sur l\u2019utilisation de <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-div-span-css-guide-complet\" target=\"_blank\" rel=\"noopener\">div et span en CSS<\/a>, n&rsquo;h\u00e9sitez pas \u00e0 lire notre guide complet.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion sur les Interlignes et Espacements de Texte en CSS<\/h3>\n\n\n\n<p>Les <strong>interlignes et espacements de texte en CSS<\/strong> sont des outils essentiels pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur sur un site web. En ma\u00eetrisant ces propri\u00e9t\u00e9s, vous pouvez cr\u00e9er des mises en page plus agr\u00e9ables et attrayantes. Continuez \u00e0 explorer ces fonctionnalit\u00e9s pour peaufiner vos comp\u00e9tences et cr\u00e9er des designs plus sophistiqu\u00e9s. Pour plus de tutoriels sur CSS, consultez notre section <a href=\"https:\/\/example.com\/css-tutorials\" target=\"_blank\" rel=\"noopener\">CSS Tutorials<\/a>, et pour en savoir plus sur la gestion des polices de caract\u00e8res, n&rsquo;h\u00e9sitez pas \u00e0 lire notre article sur <a href=\"https:\/\/example.com\/css-font-management\" target=\"_blank\" rel=\"noopener\">la gestion des polices en CSS<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify - Formation HTML et CSS -50% de r\u00e9duction\" title=\"\"><\/a>\n\n\n\n<p>Vous pouvez approfondir vos connaissances CSS et d\u00e9couvrir davantage d&rsquo;astuces et techniques en vous inscrivant \u00e0 notre cours sp\u00e9cifique sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\">HTML5 et CSS3<\/a> sur Learnify.<\/p>\n\n\n<p><script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script><br \/><script><br \/>\ndocument.addEventListener('DOMContentLoaded', function() {<br \/>\n    var iframe = document.getElementById('vimeoPlayer');<br \/>\n    var player = new Vimeo.Player(iframe);<br \/>\n    var isPopupDisplayed = false;<\/p>\n<p>    player.on('play', function() {<br \/>\n        if (!isPopupDisplayed) {<br \/>\n            player.on('timeupdate', function(data) {<br \/>\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes<br \/>\n                    \/\/ Pause the video and display the popup<br \/>\n                    player.pause().then(function() {<br \/>\n                        if (window.innerWidth > 768) {<br \/>\n                            document.querySelector('.desktop-popup').style.display = 'block';<br \/>\n                        } else {<br \/>\n                            document.querySelector('.mobile-popup').style.display = 'block';<br \/>\n                        }<br \/>\n                        fetchPriceAndUpdatePopup();<br \/>\n                        isPopupDisplayed = true;<br \/>\n                    });<br \/>\n                }<br \/>\n            });<br \/>\n        }<br \/>\n    });<\/p>\n<p>    function fetchPriceAndUpdatePopup() {<br \/>\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')<br \/>\n            .then(response => response.text())<br \/>\n            .then(html => {<br \/>\n                var parser = new DOMParser();<br \/>\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');<br \/>\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');<br \/>\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');<br \/>\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';<br \/>\n                var originalPrice = originalPriceElement ? originalPrice.textContent.trim() : '59\u20ac';<\/p>\n<p>                document.getElementById('price').textContent = price;<br \/>\n                document.getElementById('priceMobile').textContent = price;<br \/>\n                document.querySelector('.desktop-popup del').textContent = originalPrice;<br \/>\n                document.querySelector('.mobile-popup del').textContent = originalPrice;<br \/>\n            })<br \/>\n            .catch(error => console.error('Error fetching the price:', error));<br \/>\n    }<\/p>\n<p>    function closePopup() {<br \/>\n        document.querySelector('.desktop-popup').style.display = 'none';<br \/>\n        document.querySelector('.mobile-popup').style.display = 'none';<br \/>\n        player.play(); \/\/ Allows resuming the video only after closing the popup<br \/>\n    }<br \/>\n});<br \/>\n<\/script><br \/><br \/><\/p>","protected":false},"excerpt":{"rendered":"<p>Interlignes et Espacements de Texte en CSS sont des aspects fondamentaux de la mise en page web. Une bonne gestion de l&rsquo;interligne et des espacements&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2744,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5357","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5357"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5357\/revisions"}],"predecessor-version":[{"id":6037,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5357\/revisions\/6037"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2744"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}