{"id":269,"date":"2026-01-06T20:19:03","date_gmt":"2026-01-06T19:19:03","guid":{"rendered":"https:\/\/lmspro.fr\/le-modele-de-boite-css-maitriser-margin-padding-et-border\/"},"modified":"2026-01-23T14:16:10","modified_gmt":"2026-01-23T13:16:10","slug":"le-modele-de-boite-css-maitriser-margin-padding-et-border","status":"publish","type":"post","link":"https:\/\/lmspro.fr\/en\/le-modele-de-boite-css-maitriser-margin-padding-et-border\/","title":{"rendered":"The CSS Box Template: Mastering Margin, Padding, and Border"},"content":{"rendered":"<h2>Le Mod\u00c3\u00a8le de Bo\u00c3\u00aete CSS : Ma\u00c3\u00aetriser Margin, Padding et Border<\/h2>\n<p>Comprenez en profondeur le mod\u00c3\u00a8le de bo\u00c3\u00aete CSS pour contr\u00c3\u00b4ler l&rsquo;espacement et les dimensions de vos \u00c3\u00a9l\u00c3\u00a9ments. Un concept fondamental pour toute mise en page web.<\/p>\n<div class='article-meta'>\n<p><strong>Level :<\/strong> D\u00c3\u00a9butant \u00c3\u00a0 Interm\u00c3\u00a9diaire<\/p>\n<p><strong>Dur\u00c3\u00a9e :<\/strong> 45 minutes<\/p>\n<p><strong>Target audience:<\/strong> D\u00c3\u00a9veloppeurs web, Int\u00c3\u00a9grateurs<\/p>\n<\/div>\n<h2>Objectifs p\u00c3\u00a9dagogiques<\/h2>\n<ul>\n<li>Comprendre les composants du mod\u00c3\u00a8le de bo\u00c3\u00aete<\/li>\n<li>Ma\u00c3\u00aetriser margin, padding et border<\/li>\n<li>Use box sizing correctly<\/li>\n<li>R\u00c3\u00a9soudre les probl\u00c3\u00a8mes de fusion de marges<\/li>\n<\/ul>\n<div class=\"wpa-accordion wpa-accordion-flush\" id=\"article-sections-695d60270487b\">\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d60270487b-item-0\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">Les Quatre Zones de la Bo\u00c3\u00aete<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d60270487b-item-0\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">En CSS, chaque \u00c3\u00a9l\u00c3\u00a9ment est repr\u00c3\u00a9sent\u00c3\u00a9 comme une bo\u00c3\u00aete rectangulaire avec quatre zones distinctes.<\/p>\n<h4>Sch\u00c3\u00a9ma du mod\u00c3\u00a8le de bo\u00c3\u00aete<\/h4>\n<p><code class=\"language-plaintext\">\u00e2\u201d\u0152\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u0090<br \/>\n\u00e2\u201d\u201a       MARGIN         \u00e2\u201d\u201a<br \/>\n\u00e2\u201d\u201a  \u00e2\u201d\u0152\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u0090  \u00e2\u201d\u201a<br \/>\n\u00e2\u201d\u201a  \u00e2\u201d\u201a     BORDER       \u00e2\u201d\u201a  \u00e2\u201d\u201a<br \/>\n\u00e2\u201d\u201a  \u00e2\u201d\u201a  \u00e2\u201d\u0152\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u0090  \u00e2\u201d\u201a  \u00e2\u201d\u201a<br \/>\n\u00e2\u201d\u201a  \u00e2\u201d\u201a  \u00e2\u201d\u201a    PADDING    \u00e2\u201d\u201a  \u00e2\u201d\u201a  \u00e2\u201d\u201a<br \/>\n\u00e2\u201d\u201a  \u00e2\u201d\u201a  \u00e2\u201d\u201a  \u00e2\u201d\u0152\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u0090  \u00e2\u201d\u201a  \u00e2\u201d\u201a  \u00e2\u201d\u201a<br \/>\n\u00e2\u201d\u201a  \u00e2\u201d\u201a  \u00e2\u201d\u201a  \u00e2\u201d\u201a  CONTENT  \u00e2\u201d\u201a  \u00e2\u201d\u201a  \u00e2\u201d\u201a  \u00e2\u201d\u201a<br \/>\n\u00e2\u201d\u201a  \u00e2\u201d\u201a  \u00e2\u201d\u201a  \u00e2\u201d\u201a       \u00e2\u201d\u201a  \u00e2\u201d\u201a  \u00e2\u201d\u201a  \u00e2\u201d\u201a<br \/>\n\u00e2\u201d\u201a  \u00e2\u201d\u201a  \u00e2\u201d\u201a  \u00e2\u201d\u201d\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u02dc  \u00e2\u201d\u201a  \u00e2\u201d\u201a  \u00e2\u201d\u201a<br \/>\n\u00e2\u201d\u201a  \u00e2\u201d\u201a  \u00e2\u201d\u201d\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u02dc  \u00e2\u201d\u201a  \u00e2\u201d\u201a<br \/>\n\u00e2\u201d\u201a  \u00e2\u201d\u201d\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u02dc  \u00e2\u201d\u201a<br \/>\n\u00e2\u201d\u201d\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u20ac\u00e2\u201d\u02dc<\/code><\/pre>\n<h4>D\u00c3\u00a9finitions<\/h4>\n<ul>\n<li><strong>Content<\/strong> : Le contenu r\u00c3\u00a9el (texte, images)<\/li>\n<li><strong>Padding<\/strong> : Espace entre le contenu et la bordure<\/li>\n<li><strong>Border<\/strong> : La bordure visible de l&rsquo;\u00c3\u00a9l\u00c3\u00a9ment<\/li>\n<li><strong>Margin<\/strong> : Espace ext\u00c3\u00a9rieur entre les \u00c3\u00a9l\u00c3\u00a9ments<\/li>\n<\/ul>\n<h4>Visualiser dans le navigateur<\/h4>\n<p class=\"wpa-text\">Ouvrez les DevTools (F12) et inspectez un \u00c3\u00a9l\u00c3\u00a9ment. Vous verrez le mod\u00c3\u00a8le de bo\u00c3\u00aete avec les dimensions calcul\u00c3\u00a9es.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d60270487b-item-1\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">La Propri\u00c3\u00a9t\u00c3\u00a9 Padding<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d60270487b-item-1\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">THE <code>padding<\/code> cr\u00c3\u00a9e de l&rsquo;espace <strong>\u00c3\u00a0 l&rsquo;int\u00c3\u00a9rieur<\/strong> de l&rsquo;\u00c3\u00a9l\u00c3\u00a9ment, entre le contenu et la bordure.<\/p>\n<h4>Syntaxes<\/h4>\n<p><code class=\"language-css\">\/* Toutes les directions *\/<br \/>\n.box {<br \/>\n padding: 20px;<br \/>\n}<\/p>\n<p>\/* Vertical | Horizontal *\/<br \/>\n.box {<br \/>\n padding: 20px 40px;<br \/>\n}<\/p>\n<p>\/* Haut | Horizontal | Bas *\/<br \/>\n.box {<br \/>\n padding: 10px 20px 30px;<br \/>\n}<\/p>\n<p>\/* Haut | Droite | Bas | Gauche (sens horaire) *\/<br \/>\n.box {<br \/>\n padding: 10px 20px 30px 40px;<br \/>\n}<\/p>\n<p>\/* Propri\u00c3\u00a9t\u00c3\u00a9s individuelles *\/<br \/>\n.box {<br \/>\n padding-top: 10px;<br \/>\n padding-right: 20px;<br \/>\n padding-bottom: 30px;<br \/>\n padding-left: 40px;<br \/>\n}<\/code><\/pre>\n<h4>Practical example<\/h4>\n<p><code class=\"language-css\">.card {<br \/>\n padding: 1.5rem;<br \/>\n background-color: #f5f5f5;<br \/>\n}<\/p>\n<p>.button {<br \/>\n padding: 0.75rem 1.5rem;<br \/>\n background-color: blue;<br \/>\n color: white;<br \/>\n}<\/code><\/pre>\n<div class=\"tip-box\">\n <strong>\u00f0\u0178\u2019\u00a1 Astuce :<\/strong> Le padding augmente les dimensions totales de l&rsquo;\u00c3\u00a9l\u00c3\u00a9ment (sauf avec <code>box-sizing: border-box<\/code>).\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d60270487b-item-2\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">La Propri\u00c3\u00a9t\u00c3\u00a9 Margin<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d60270487b-item-2\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">THE <code>margin<\/code> cr\u00c3\u00a9e de l&rsquo;espace <strong>\u00c3\u00a0 l&rsquo;ext\u00c3\u00a9rieur<\/strong> de l&rsquo;\u00c3\u00a9l\u00c3\u00a9ment, entre celui-ci et ses voisins.<\/p>\n<h4>Syntaxes identiques au padding<\/h4>\n<p><code class=\"language-css\">.box {<br \/>\n margin: 20px;       \/* Tous *\/<br \/>\n margin: 20px 40px;     \/* V | H *\/<br \/>\n margin: 10px 20px 30px;  \/* T | H | B *\/<br \/>\n margin: 10px 20px 30px 40px; \/* T | R | B | L *\/<br \/>\n}<\/code><\/pre>\n<h4>Centrage horizontal avec auto<\/h4>\n<p><code class=\"language-css\">.container {<br \/>\n width: 800px;<br \/>\n margin: 0 auto; \/* Centr\u00c3\u00a9 horizontalement *\/<br \/>\n}<\/p>\n<p>\/* \u00c3\u2030quivalent *\/<br \/>\n.container {<br \/>\n width: 800px;<br \/>\n margin-left: auto;<br \/>\n margin-right: auto;<br \/>\n}<\/code><\/pre>\n<h4>Marges n\u00c3\u00a9gatives<\/h4>\n<p><code class=\"language-css\">\/* Faire d\u00c3\u00a9border un \u00c3\u00a9l\u00c3\u00a9ment *\/<br \/>\n.highlight {<br \/>\n margin-left: -20px;<br \/>\n margin-right: -20px;<br \/>\n padding-left: 20px;<br \/>\n padding-right: 20px;<br \/>\n background-color: yellow;<br \/>\n}<\/code><\/pre>\n<div class=\"warning-box\">\n <strong>\u00e2\u0161\u00a0\u00ef\u00b8\u008f Attention :<\/strong> Contrairement au padding, le margin peut avoir des valeurs n\u00c3\u00a9gatives et peut fusionner (margin collapsing).\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d60270487b-item-3\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">La Propri\u00c3\u00a9t\u00c3\u00a9 Border<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d60270487b-item-3\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>Syntaxe raccourcie<\/h4>\n<p><code class=\"language-css\">.box {<br \/>\n border: 2px solid #333;<br \/>\n \/* largeur | style | couleur *\/<br \/>\n}<\/code><\/pre>\n<h4>Styles de bordure<\/h4>\n<p><code class=\"language-css\">.examples {<br \/>\n border-style: solid;  \/* Ligne pleine *\/<br \/>\n border-style: dashed; \/* Tirets *\/<br \/>\n border-style: dotted; \/* Pointill\u00c3\u00a9s *\/<br \/>\n border-style: double; \/* Double ligne *\/<br \/>\n border-style: groove; \/* 3D enfonc\u00c3\u00a9 *\/<br \/>\n border-style: ridge;  \/* 3D en relief *\/<br \/>\n border-style: inset;  \/* Effet enfonc\u00c3\u00a9 *\/<br \/>\n border-style: outset; \/* Effet en relief *\/<br \/>\n border-style: none;  \/* Pas de bordure *\/<br \/>\n}<\/code><\/pre>\n<h4>Bordures individuelles<\/h4>\n<p><code class=\"language-css\">.card {<br \/>\n border-top: 3px solid blue;<br \/>\n border-bottom: 1px solid #ccc;<br \/>\n}<\/p>\n<p>.accent {<br \/>\n border-left: 4px solid #0066cc;<br \/>\n padding-left: 1rem;<br \/>\n}<\/code><\/pre>\n<h4>Coins arrondis<\/h4>\n<p><code class=\"language-css\">.rounded {<br \/>\n border-radius: 8px;<br \/>\n}<\/p>\n<p>.pill {<br \/>\n border-radius: 9999px; \/* Bouton pilule *\/<br \/>\n}<\/p>\n<p>.custom {<br \/>\n border-radius: 10px 20px 30px 40px;<br \/>\n \/* TL | TR | BR | BL *\/<br \/>\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d60270487b-item-4\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">Box-Sizing : Le Calcul des Dimensions<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d60270487b-item-4\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>Le probl\u00c3\u00a8me<\/h4>\n<p class=\"wpa-text\">Par d\u00c3\u00a9faut, <code>width<\/code> And <code>height<\/code> d\u00c3\u00a9finissent la taille du <strong>contenu seul<\/strong>.<\/p>\n<p><code class=\"language-css\">\/* content-box (d\u00c3\u00a9faut) *\/<br \/>\n.box {<br \/>\n width: 200px;<br \/>\n padding: 20px;<br \/>\n border: 10px solid;<br \/>\n}<br \/>\n\/* Largeur totale = 200 + 40 + 20 = 260px ! *\/<\/code><\/pre>\n<h4>La solution : border-box<\/h4>\n<p><code class=\"language-css\">\/* border-box *\/<br \/>\n.box {<br \/>\n box-sizing: border-box;<br \/>\n width: 200px;<br \/>\n padding: 20px;<br \/>\n border: 10px solid;<br \/>\n}<br \/>\n\/* Largeur totale = 200px (inclut padding et border) *\/<\/code><\/pre>\n<h4>Reset recommand\u00c3\u00a9<\/h4>\n<p><code class=\"language-css\">\/* Appliquer border-box globalement *\/<br \/>\n*, *::before, *::after {<br \/>\n box-sizing: border-box;<br \/>\n}<\/p>\n<p>\/* Alternative h\u00c3\u00a9rit\u00c3\u00a9e *\/<br \/>\nhtml {<br \/>\n box-sizing: border-box;<br \/>\n}<br \/>\n*, *::before, *::after {<br \/>\n box-sizing: inherit;<br \/>\n}<\/code><\/pre>\n<div class=\"success-box\">\n <strong>\u00e2\u0153\u2026 Bonne pratique :<\/strong> Toujours utiliser <code>box-sizing: border-box<\/code> dans vos projets. Cela rend le calcul des dimensions intuitif.\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d60270487b-item-5\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">Fusion des Marges (Margin Collapsing)<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d60270487b-item-5\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<p class=\"wpa-text\">Les marges verticales de blocs adjacents peuvent <strong>fusionner<\/strong> en une seule marge.<\/p>\n<h4>Exemple de fusion<\/h4>\n<p><code class=\"language-html\">&lt;p style=\"margin-bottom: 30px;\"&gt;Premier paragraphe&lt;\/p&gt;<br \/>\n&lt;p style=\"margin-top: 20px;\"&gt;Deuxi\u00c3\u00a8me paragraphe&lt;\/p&gt;<\/p>\n<p>&lt;!-- L'espace entre eux sera 30px, pas 50px ! --&gt;<\/code><\/pre>\n<h4>R\u00c3\u00a8gle de fusion<\/h4>\n<p class=\"wpa-text\">La marge r\u00c3\u00a9sultante est \u00c3\u00a9gale \u00c3\u00a0 la <strong>plus grande<\/strong> des deux marges, pas leur somme.<\/p>\n<h4>Quand \u00c3\u00a7a ne fusionne PAS<\/h4>\n<ul>\n<li>Marges horizontales (gauche\/droite)<\/li>\n<li>\u00c3\u2030l\u00c3\u00a9ments avec <code>display: inline-block<\/code><\/li>\n<li>\u00c3\u2030l\u00c3\u00a9ments en position <code>absolute<\/code> Or <code>fixed<\/code><\/li>\n<li>\u00c3\u2030l\u00c3\u00a9ments avec <code>overflow<\/code> diff\u00c3\u00a9rent de <code>visible<\/code><\/li>\n<li>\u00c3\u2030l\u00c3\u00a9ments Flexbox ou Grid<\/li>\n<\/ul>\n<h4>Solutions<\/h4>\n<p><code class=\"language-css\">\/* 1. Utiliser padding au lieu de margin *\/<br \/>\n.container {<br \/>\n padding-top: 20px;<br \/>\n}<\/p>\n<p>\/* 2. Utiliser flexbox *\/<br \/>\n.stack {<br \/>\n display: flex;<br \/>\n flex-direction: column;<br \/>\n gap: 20px;<br \/>\n}<\/p>\n<p>\/* 3. Utiliser une bordure invisible *\/<br \/>\n.parent {<br \/>\n border-top: 1px solid transparent;<br \/>\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\"><button class=\"wpa-accordion-header\" data-wpa-target=\"#article-sections-695d60270487b-item-6\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\">Exercice : Cr\u00c3\u00a9er un Syst\u00c3\u00a8me de Cartes<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"article-sections-695d60270487b-item-6\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>HTML<\/h4>\n<p><code class=\"language-html\">&lt;div class=\"card-grid\"&gt;<br \/>\n &lt;article class=\"card\"&gt;<br \/>\n  &lt;img src=\"image1.jpg\" alt=\"Image 1\" class=\"card-image\"&gt;<br \/>\n  &lt;div class=\"card-content\"&gt;<br \/>\n   &lt;h3 class=\"card-title\"&gt;Titre de la carte&lt;\/h3&gt;<br \/>\n   &lt;p class=\"card-text\"&gt;Description du contenu...&lt;\/p&gt;<br \/>\n   &lt;a href=\"#\" class=\"card-button\"&gt;En savoir plus&lt;\/a&gt;<br \/>\n  <\/div><br \/>\n &lt;\/article&gt;<br \/>\n &lt;!-- R\u00c3\u00a9p\u00c3\u00a9ter pour d'autres cartes --&gt;<br \/>\n<\/div><\/code><\/pre>\n<h4>CSS avec mod\u00c3\u00a8le de bo\u00c3\u00aete<\/h4>\n<p><code class=\"language-css\">\/* Reset *\/<br \/>\n*, *::before, *::after {<br \/>\n box-sizing: border-box;<br \/>\n margin: 0;<br \/>\n padding: 0;<br \/>\n}<\/p>\n<p>\/* Grille de cartes *\/<br \/>\n.card-grid {<br \/>\n display: grid;<br \/>\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));<br \/>\n gap: 2rem;<br \/>\n padding: 2rem;<br \/>\n}<\/p>\n<p>\/* Carte *\/<br \/>\n.card {<br \/>\n border: 1px solid #e0e0e0;<br \/>\n border-radius: 12px;<br \/>\n overflow: hidden;<br \/>\n background: white;<br \/>\n transition: box-shadow 0.3s ease;<br \/>\n}<\/p>\n<p>.card:hover {<br \/>\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);<br \/>\n}<\/p>\n<p>\/* Image *\/<br \/>\n.card-image {<br \/>\n width: 100{4a00f6d73ff9e2f537053b7c202ea3e7e3a1709f4630047a1912e510d35e71a5};<br \/>\n height: 200px;<br \/>\n object-fit: cover;<br \/>\n display: block;<br \/>\n}<\/p>\n<p>\/* Contenu *\/<br \/>\n.card-content {<br \/>\n padding: 1.5rem;<br \/>\n}<\/p>\n<p>.card-title {<br \/>\n margin-bottom: 0.75rem;<br \/>\n}<\/p>\n<p>.card-text {<br \/>\n margin-bottom: 1rem;<br \/>\n color: #666;<br \/>\n}<\/p>\n<p>\/* Bouton *\/<br \/>\n.card-button {<br \/>\n display: inline-block;<br \/>\n padding: 0.75rem 1.5rem;<br \/>\n background-color: #0066cc;<br \/>\n color: white;<br \/>\n text-decoration: none;<br \/>\n border-radius: 6px;<br \/>\n transition: background-color 0.2s;<br \/>\n}<\/p>\n<p>.card-button:hover {<br \/>\n background-color: #0052a3;<br \/>\n}<\/code><\/pre>\n<div class=\"success-box\">\n <strong>\u00e2\u0153\u2026 R\u00c3\u00a9sultat :<\/strong> Un syst\u00c3\u00a8me de cartes responsive avec espacement coh\u00c3\u00a9rent et effets de survol \u00c3\u00a9l\u00c3\u00a9gants.\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"quiz-block-1\" class=\"quiz-container\" data-quiz-json=\"https:\/\/lmspro.fr\/wp-content\/plugins\/generate-article-endpoint\/quiz-data\/en\/quiz-modele-boite-css-margin-padding-border.json\" aria-label=\"Interactive Quiz\"><div class=\"quiz-loading\" role=\"status\" aria-live=\"polite\"><span class=\"quiz-sr-only\">Loading quiz...<\/span><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Le Mod\u00c3\u00a8le de Bo\u00c3\u00aete CSS : Ma\u00c3\u00aetriser Margin, Padding et Border Comprenez en profondeur le mod\u00c3\u00a8le de bo\u00c3\u00aete CSS pour contr\u00c3\u00b4ler l&rsquo;espacement et les dimensions de vos \u00c3\u00a9l\u00c3\u00a9ments. Un concept fondamental pour toute mise en page web. Niveau : D\u00c3\u00a9butant \u00c3\u00a0 Interm\u00c3\u00a9diaire Dur\u00c3\u00a9e : 45 minutes Public cible : D\u00c3\u00a9veloppeurs web, Int\u00c3\u00a9grateurs Objectifs p\u00c3\u00a9dagogiques Comprendre &#8230; <a href=\"https:\/\/lmspro.fr\/en\/le-modele-de-boite-css-maitriser-margin-padding-et-border\/\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> \u00ab\u00a0Le Mod\u00e8le de Bo\u00eete CSS : Ma\u00eetriser Margin, Padding et Border\u00a0\u00bb<\/span> &raquo;<\/a><\/p>","protected":false},"author":1,"featured_media":270,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[89,30],"tags":[78,75,79,26,76,77],"class_list":["post-269","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-modele-de-boite-css","category-module-1-fondamentaux-techniques-du-web","tag-border","tag-box-model","tag-box-sizing","tag-css","tag-margin","tag-padding"],"_links":{"self":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/comments?post=269"}],"version-history":[{"count":1,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/269\/revisions"}],"predecessor-version":[{"id":471,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/269\/revisions\/471"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media\/270"}],"wp:attachment":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media?parent=269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/categories?post=269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/tags?post=269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}