{"id":5439,"date":"2024-08-27T19:28:58","date_gmt":"2024-08-27T19:28:58","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/espacements-lignes-colonnes-css-guide\/"},"modified":"2024-12-03T17:47:04","modified_gmt":"2024-12-03T17:47:04","slug":"espacements-lignes-colonnes-css-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/espacements-lignes-colonnes-css-guide\/","title":{"rendered":"10.4 Espacements entre Lignes et Colonnes en CSS : Guide"},"content":{"rendered":"Pour am\u00e9liorer l&rsquo;article et r\u00e9pondre aux exigences SEO, voici la version \u00e9dit\u00e9e avec les modifications demand\u00e9es :\n\n\n<p><strong>Espacements entre lignes et colonnes en CSS<\/strong> sont essentiels pour structurer et rendre vos pages web lisibles et esth\u00e9tiques. Comprendre comment d\u00e9finir et ajuster les <strong>espacements en CSS<\/strong> am\u00e9liore non seulement l\u2019apparence mais aussi l\u2019ergonomie de vos sites web. Apprenons ensemble comment ma\u00eetriser ces techniques \u00e0 travers des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Espacements entre Lignes et Colonnes 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\/586674977?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 ? originalPriceElement.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, les espacements se d\u00e9finissent principalement \u00e0 l\u2019aide des propri\u00e9t\u00e9s <code>margin<\/code> et <code>padding<\/code>. Le <code>margin<\/code> est l\u2019espace autour des \u00e9l\u00e9ments HTML, tandis que le <code>padding<\/code> est l\u2019espace \u00e0 l\u2019int\u00e9rieur des \u00e9l\u00e9ments entre leur contenu et leurs bordures.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Espacements Entre Lignes<\/h3>\n\n\n\n<p>L\u2019espacement entre les lignes de texte est contr\u00f4l\u00e9 principalement par la propri\u00e9t\u00e9 <code>line-height<\/code>. Cette propri\u00e9t\u00e9 d\u00e9finit la hauteur de la ligne et peut \u00eatre exprim\u00e9e en unit\u00e9s relatives (comme em) ou absolues (comme px). Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>p {\n  line-height: 1.5; \/* 1.5 fois la taille de la police *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Espacements Entre Colonnes<\/h3>\n\n\n\n<p>Pour d\u00e9limiter l\u2019espace entre des \u00e9l\u00e9ments en colonnes, vous pouvez utiliser la propri\u00e9t\u00e9 <code>column-gap<\/code> pour les mises en page en grille (<code>display: grid;<\/code>) et <code>gap<\/code> pour les flex containers. Voici deux exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  column-gap: 20px; \/* 20px d'espace entre les colonnes *\/\n}\n\n.flex-container {\n  display: flex;\n  gap: 20px; \/* 20px d'espace entre les \u00e9l\u00e9ments flex *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner Marges et Espacement en CSS<\/h3>\n\n\n\n<p>Voici comment combiner marges et espacement au sein d&rsquo;une grille pour g\u00e9rer l&rsquo;espacement entre \u00e9l\u00e9ments :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-item {\n  margin: 10px; \/* Marge autour de chaque \u00e9l\u00e9ment de grille *\/\n  padding: 10px; \/* Espacement \u00e0 l'int\u00e9rieur de chaque \u00e9l\u00e9ment *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Espacements dans les Layouts Flexbox et Grid<\/h3>\n\n\n\n<p>Les propri\u00e9t\u00e9s <code>gap<\/code> s&rsquo;av\u00e8rent particuli\u00e8rement utiles dans les layouts Flexbox et Grid, assurant un espacement uniforme entre les \u00e9l\u00e9ments :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  display: flex; \/* ou grid *\/\n  gap: 20px; \/* Espacement uniforme *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Astuces pour un Espacement Uniforme<\/h3>\n\n\n\n<p>Pour assurer un espacement uniforme dans toute votre page, pensez \u00e0 utiliser des variables CSS ou des mixins SCSS pour d\u00e9finir et r\u00e9utiliser les valeurs d\u2019espacement :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>:root {\n  --gap-large: 20px;\n  --gap-small: 10px;\n}\n\n.container {\n  display: grid;\n  gap: var(--gap-large);\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combinaison des Techniques pour des Mises en Page Complexes<\/h3>\n\n\n\n<p>Pour des mises en page plus complexes, combiner Flexbox et Grid peut s&rsquo;av\u00e9rer efficace. Voici un exemple o\u00f9 nous combinons les deux pour un layout de carte produit :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.product-card {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap-small); \/* Espacement vertical entre \u00e9l\u00e9ments *\/\n}\n\n.product-card .details {\n  display: grid;\n  grid-template-columns: 1fr 2fr;\n  gap: var(--gap-small); \/* Espacement entre les colonnes *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Espacement et Responsive Design<\/h3>\n\n\n\n<p>Assurer un espacement appropri\u00e9 sur diff\u00e9rents \u00e9crans est crucial. Gr\u00e2ce aux media queries, vous pouvez ajuster les espacements en fonction de la taille de l\u2019\u00e9cran :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media (max-width: 600px) {\n  .container {\n    gap: var(--gap-small);\n  }\n}\n\n@media (min-width: 601px) {\n  .container {\n    gap: var(--gap-large);\n  }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Variables CSS pour une Gestion Efficace de l&rsquo;Espacement<\/h3>\n\n\n\n<p>Les variables CSS permettent une gestion centralis\u00e9e des espacements, facilitant les modifications globales et l&rsquo;application coh\u00e9rente \u00e0 travers toute votre feuille de style :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>:root {\n  --padding: 16px;\n  --margin: 16px;\n}\n\n.element {\n  padding: var(--padding);\n  margin: var(--margin);\n}\n<\/code><\/pre>\n\n\n<!-- Ajoutant du contenu additionnel pour la longueur requise -->\n\n\n<h3 class=\"wp-block-heading\">Application Pratique : Espacement dans un Blog Layout<\/h3>\n\n\n\n<p>Pour un layout de blog, vous pouvez d\u00e9finir les espacements avec Flexbox et Grid pour structurer l\u2019affichage des articles, des images et des barres lat\u00e9rales :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.blog-layout {\n  display: grid;\n  grid-template-columns: 1fr 3fr;\n  column-gap: var(--gap-large);\n  row-gap: var(--gap-large);\n  margin: var(--margin);\n}\n\n.blog-layout .article {\n  padding: var(--padding);\n}\n\n.blog-layout .sidebar {\n  padding: var(--padding);\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>espacements en CSS<\/strong> sont essentiels pour une mise en page optimis\u00e9e et agr\u00e9able. Que vous travailliez sur des interfaces de blogs, des pages produits, ou des applications complexes, ma\u00eetriser les espacements vous permettra d\u2019atteindre une conception moderne et coh\u00e9rente. Continuez \u00e0 explorer CSS pour d\u00e9couvrir d&rsquo;autres propri\u00e9t\u00e9s et techniques avanc\u00e9es. Pour approfondir vos connaissances, n\u2019h\u00e9sitez pas \u00e0 consulter notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-avanc\u00e9\/200\">les techniques avanc\u00e9es en CSS<\/a> ou suivre notre <a href=\"https:\/\/wikiform.fr\/codespace\/formation-css-avanc\u00e9e\">formation CSS avanc\u00e9e<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/formation-html-css-offre-50.gif\" loading=\"lazy\" alt=\"Formation HTML et CSS Offre 50%\" title=\"\"><\/a>\n\n\n<!-- Liens internes -->\n<p>Pour plus d&rsquo;informations sur l&rsquo;int\u00e9gration des espaces et les bases en HTML, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\" target=\"_blank\" rel=\"noopener\">le fonctionnement des navigateurs web<\/a>. Vous pouvez \u00e9galement apprendre \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">cr\u00e9er votre premi\u00e8re page HTML<\/a>. Si vous souhaitez ma\u00eetriser les \u00e9l\u00e9ments textuels, lisez notre guide complet sur <a href=\"https:\/\/wikiform.fr\/codespace\/elements-textuels-html-guide-complet\" target=\"_blank\" rel=\"noopener\">les \u00e9l\u00e9ments textuels en HTML<\/a>. Pour une compr\u00e9hension avanc\u00e9e des grilles CSS, explorez notre section sur <a href=\"https:\/\/wikiform.fr\/codespace\/presentation-grilles-css-grid-layout\" target=\"_blank\" rel=\"noopener\">les grilles CSS<\/a>.<\/p>\n\n<!-- Liens externes -->\n<p>Pour une compl\u00e9mentation de vos apprentissages, veuillez consulter le guide complet sur <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/margin\" target=\"_blank\" rel=\"noopener\">MDN Web Docs sur les marges en CSS<\/a>. Vous pouvez \u00e9galement lire ce <a href=\"https:\/\/www.w3schools.com\/css\/css_margin.asp\" target=\"_blank\" rel=\"noopener\">guide sur W3Schools<\/a> pour une approche d\u00e9taill\u00e9e. Pour des astuces pratiques sur Flexbox, visitez <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\" target=\"_blank\" rel=\"noopener\">CSS-Tricks<\/a>.<\/p>\n\n<!-- Ajout des liens SEO -->\n<p>Pour approfondir votre compr\u00e9hension des diff\u00e9rents attributs et s\u00e9lecteurs en CSS, apprenez-en plus sur <a href=\"https:\/\/wikiform.fr\/codespace\/selecteurs-css-complexes-combinateurs\" target=\"_blank\" rel=\"noopener\">les s\u00e9lecteurs CSS complexes<\/a>. Si vous rencontrez des erreurs dans votre code, d\u00e9couvrez comment <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-inspecteur-html-deboguer\" target=\"_blank\" rel=\"noopener\">d\u00e9boguer avec l&rsquo;inspecteur HTML<\/a>. Enfin, pour am\u00e9liorer vos comp\u00e9tences, suivez notre <a href=\"https:\/\/wikiform.fr\/codespace\/formation-css-avanc\u00e9e\" target=\"_blank\" rel=\"noopener\">formation CSS avanc\u00e9e<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Pour am\u00e9liorer l&rsquo;article et r\u00e9pondre aux exigences SEO, voici la version \u00e9dit\u00e9e avec les modifications demand\u00e9es : Espacements entre lignes et colonnes en CSS sont&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2733,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5439","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\/5439","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=5439"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5439\/revisions"}],"predecessor-version":[{"id":5440,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5439\/revisions\/5440"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2733"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5439"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5439"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}