{"id":5369,"date":"2024-08-27T17:09:00","date_gmt":"2024-08-27T17:09:00","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/types-elements-block-inline-css\/"},"modified":"2024-08-27T17:09:06","modified_gmt":"2024-08-27T17:09:06","slug":"types-elements-block-inline-css","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/types-elements-block-inline-css\/","title":{"rendered":"5.5 Types d&rsquo;\u00c9l\u00e9ments Block et Inline en CSS"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Les \u00e9l\u00e9ments Block et Inline en CSS<\/strong> constituent des concepts fondamentaux pour la mise en page des pages web. Comprendre les diff\u00e9rences entre ces types d&rsquo;\u00e9l\u00e9ments et savoir comment les manipuler peut transformer votre capacit\u00e9 \u00e0 cr\u00e9er des designs responsifs et \u00e9l\u00e9gants. Explorons les types d&rsquo;\u00e9l\u00e9ments Block et Inline en CSS, ainsi que leur application \u00e0 travers des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Types d&rsquo;\u00c9l\u00e9ments Block et Inline 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\/586322180?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 \u00e9l\u00e9ments peuvent \u00eatre classifi\u00e9s comme Block ou Inline, chacun ayant des comportements sp\u00e9cifiques en termes de mise en page. Les \u00e9l\u00e9ments Block occupent toute la largeur disponible et commencent sur une nouvelle ligne, tandis que les \u00e9l\u00e9ments Inline n&rsquo;occupent que la largeur n\u00e9cessaire et permettent d&rsquo;autres \u00e9l\u00e9ments inline de s&rsquo;afficher sur la m\u00eame ligne. Ces comportements influencent directement la structuration et le style de votre contenu web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre les \u00c9l\u00e9ments Block<\/h3>\n\n\n\n<p>Les \u00e9l\u00e9ments Block prennent toute la largeur de leur conteneur et commencent sur une nouvelle ligne. Ils sont principalement utilis\u00e9s pour structurer de grandes sections de contenu. Voici quelques exemples courants d&rsquo;\u00e9l\u00e9ments Block :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div&gt;\n&lt;h1&gt;&lt;\/h1&gt;\n&lt;p&gt;&lt;\/p&gt;\n&lt;section&gt;&lt;\/section&gt;\n&lt;article&gt;&lt;\/article&gt;\n&lt;footer&gt;&lt;\/footer&gt;\n&lt;header&gt;&lt;\/header&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple Pratique d&rsquo;\u00c9l\u00e9ments Block<\/h3>\n\n\n\n<p>Utilisons ces \u00e9l\u00e9ments Block dans un exemple de page HTML pour voir comment ils se comportent. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;title&gt;Exemple d'\u00c9l\u00e9ments Block&lt;\/title&gt;\n  &lt;style&gt;\n    div {\n        border: 1px solid #000;\n        padding: 10px;\n    }\n    h1 {\n        font-size: 2em;\n        color: #333;\n    }\n    p {\n        font-size: 1em;\n        color: #666;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div&gt;\n    &lt;h1&gt;Titre de la Section&lt;\/h1&gt;\n    &lt;p&gt;Ceci est un paragraphe dans une section divis\u00e9e par un \u00e9l\u00e9ment Block.&lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre les \u00c9l\u00e9ments Inline<\/h3>\n\n\n\n<p>Contrairement aux \u00e9l\u00e9ments Block, les \u00e9l\u00e9ments Inline occupent uniquement la largeur n\u00e9cessaire \u00e0 leur contenu et peuvent coexister sur la m\u00eame ligne avec d&rsquo;autres \u00e9l\u00e9ments Inline. Voici quelques exemples courants d&rsquo;\u00e9l\u00e9ments Inline :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;span&gt;&lt;\/span&gt;\n&lt;a&gt;&lt;\/a&gt;\n&lt;img&gt;\n&lt;input&gt;\n&lt;strong&gt;&lt;\/strong&gt;\n&lt;em&gt;&lt;\/em&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple Pratique d&rsquo;\u00c9l\u00e9ments Inline<\/h3>\n\n\n\n<p>Utilisons certains de ces \u00e9l\u00e9ments Inline dans un exemple pratique pour d\u00e9montrer leur comportement. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;title&gt;Exemple d'\u00c9l\u00e9ments Inline&lt;\/title&gt;\n  &lt;style&gt;\n    a {\n        color: #f00;\n        text-decoration: none;\n    }\n    span {\n        font-weight: bold;\n    }\n    img {\n        width: 50px;\n        height: 50px;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;p&gt;Ceci est un &lt;span&gt;text en gras&lt;\/span&gt; \u00e0 l'int\u00e9rieur d'un paragraphe.&lt;\/p&gt;\n  &lt;a href=\"#\"&gt;Ceci est un lien&lt;\/a&gt;\n  &lt;img src=\"image.jpg\" alt=\"Image exemplaire\"&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combinaison d&rsquo;\u00c9l\u00e9ments Block et Inline<\/h3>\n\n\n\n<p>Il est courant de combiner des \u00e9l\u00e9ments Block et Inline pour cr\u00e9er des pages web complexes et harmonieusement structur\u00e9es. Voici un exemple de combinaison :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;title&gt;Combinaison d'\u00c9l\u00e9ments Block et Inline&lt;\/title&gt;\n  &lt;style&gt;\n    .block {\n        background-color: #eaeaea;\n        padding: 20px;\n        margin-bottom: 10px;\n    }\n    .inline {\n        color: #0073e6;\n        text-decoration: underline;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div class=\"block\"&gt;\n    &lt;h1&gt;Titre Principal&lt;\/h1&gt;\n    &lt;p&gt;Ceci est un paragraphe contenant un &lt;span class=\"inline\"&gt;element Inline&lt;\/span&gt; au milieu.&lt;\/p&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"block\"&gt;\n    &lt;a href=\"#\" class=\"inline\"&gt;Ceci est un lien \u00e0 l'int\u00e9rieur d'un div Block.&lt;\/a&gt;\n  &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Changer le Comportement des \u00c9l\u00e9ments avec CSS<\/h3>\n\n\n\n<p>Avec CSS, il est possible de modifier le comportement par d\u00e9faut des \u00e9l\u00e9ments Block et Inline en utilisant la propri\u00e9t\u00e9 <code>display<\/code>. Voici des exemples pratiques :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;title&gt;Modifier le Comportement des \u00c9l\u00e9ments&lt;\/title&gt;\n  &lt;style&gt;\n    .inline-block {\n        display: inline-block;\n        padding: 10px;\n        border: 1px solid #000;\n    }\n    .block-inline {\n        display: block;\n        margin-top: 10px;\n        background-color: #f0f0f0;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;span class=\"inline-block\"&gt;Trait\u00e9e comme un \u00e9l\u00e9ment Block&lt;\/span&gt;\n  &lt;a href=\"#\" class=\"block-inline\"&gt;Trait\u00e9e comme un \u00e9l\u00e9ment Inline&lt;\/a&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>types d\u2019\u00e9l\u00e9ments block et inline en CSS<\/strong> constituent des piliers essentiels de la mise en page web. En ma\u00eetrisant ces concepts, vous pouvez construire des interfaces utilisateur plus flexibles et \u00e9l\u00e9gantes. Continuez \u00e0 explorer les propri\u00e9t\u00e9s CSS et exp\u00e9rimentez avec diff\u00e9rents types d&rsquo;\u00e9l\u00e9ments pour am\u00e9liorer vos comp\u00e9tences en conception web. Pour aller plus loin, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\">comment cr\u00e9er votre premi\u00e8re page HTML<\/a> ou d\u00e9couvrez comment estiliser les formulaires HTML avec CSS dans notre <a href=\"https:\/\/wikiform.fr\/codespace\/formulaires-html-guide-pratique\">guide d\u00e9taill\u00e9 sur les formulaires CSS<\/a>.<\/p>\n<p>D\u00e9couvrez \u00e9galement nos articles sur le <a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\">HTML Head<\/a>, les <a href=\"https:\/\/wikiform.fr\/codespace\/elements-textuels-html-guide-complet\">\u00e9l\u00e9ments textuels en HTML<\/a>, et les <a href=\"https:\/\/wikiform.fr\/codespace\/elements-titre-html-explications-guide\">\u00e9l\u00e9ments titre en HTML<\/a> pour enrichir vos connaissances.<\/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\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML et CSS Offre 50%\" title=\"\"><\/a>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-et-sass-interm\u00e9diaire\/145\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation CSS Offre 50%\" title=\"\"><\/a>\n\n\n\u00ab\u00a0`\nLiens internes ajout\u00e9s :\n&#8211; https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\n&#8211; https:\/\/wikiform.fr\/codespace\/formulaires-html-guide-pratique\n&#8211; https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\n&#8211; https:\/\/wikiform.fr\/codespace\/elements-textuels-html-guide-complet\n&#8211; https:\/\/wikiform.fr\/codespace\/elements-titre-html-explications-guide\n\nLiens externes ajout\u00e9s pour ressources suppl\u00e9mentaires :\n&#8211; [MDN Web Docs &#8211; Block &#038; Inline Layout in CSS](https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/Building_blocks\/Block_and_inline_layouts)\n&#8211; [CSS-Tricks &#8211; All About Floats](https:\/\/css-tricks.com\/all-about-floats\/)\n&#8211; [W3Schools &#8211; CSS Display Property](https:\/\/www.w3schools.com\/cssref\/pr_class_display.asp)","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Les \u00e9l\u00e9ments Block et Inline en CSS constituent des concepts fondamentaux pour la mise en page des pages web. Comprendre les diff\u00e9rences entre ces&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2783,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5369","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\/5369","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=5369"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5369\/revisions"}],"predecessor-version":[{"id":5370,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5369\/revisions\/5370"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2783"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}