{"id":444,"date":"2026-01-23T12:11:09","date_gmt":"2026-01-23T11:11:09","guid":{"rendered":"https:\/\/lmspro.fr\/la-mise-en-forme-css-2\/"},"modified":"2026-01-23T15:20:04","modified_gmt":"2026-01-23T14:20:04","slug":"la-mise-en-forme-css-2","status":"publish","type":"post","link":"https:\/\/lmspro.fr\/en\/la-mise-en-forme-css-2\/","title":{"rendered":"CSS formatting"},"content":{"rendered":"<h2>CSS formatting<\/h2>\n<p class=\"wpa-text\">Discover the secrets of CSS formatting and master the box model, a fundamental element for creating harmonious and professional web interfaces. This training will enable you to understand and effectively use the margin, padding, border, and box-sizing properties.<\/p>\n<div class=\"article-meta\">\n<p><strong>Module:<\/strong> Module 1: Technical Fundamentals of the Web<\/p>\n<p><strong>Level :<\/strong> Beginner<\/p>\n<p><strong>Duration :<\/strong> 20 minutes<\/p>\n<p><strong>Prerequisites:<\/strong> None<\/p>\n<\/div>\n<h2>Educational objectives<\/h2>\n<ul>\n<li>Explain how cascading style sheets work and their role in web presentation<\/li>\n<li>Create inline styles and understand their priority in the CSS cascade<\/li>\n<li>Effectively use CSS selectors to target HTML elements<\/li>\n<li>Mastering the components of the box model (margin, padding, border)<\/li>\n<li>Solve common problems related to box model and margin merging<\/li>\n<\/ul>\n<div class=\"wpa-accordion wpa-accordion-flush\" id=\"accordion-la-mise-en-forme-css\">\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-la-mise-en-forme-css-item-1\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">01<\/span> Understanding the components of the box model<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-la-mise-en-forme-css-item-1\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>The CSS box model: a fundamental architecture<\/h4>\n<p>Each HTML element is represented as a rectangular box composed of four distinct areas: the content, the padding, the border, and the margin. This representation, called the CSS box model, is crucial for understanding how elements are sized and positioned on a web page. The content forms the core of the element where the text and other child elements are displayed. The padding creates space between the content and the border, visually giving the element breathing room. The border forms the visible outline of the element, while the margin establishes the spacing with adjacent elements.<\/p>\n<h4>Visualization and calculation of dimensions<\/h4>\n<p>Understanding the box model is essential for mastering element sizing. By default, the width and height defined in CSS only apply to the content area. Therefore, the total dimensions of an element include the content plus padding, border, and possibly margin. This peculiarity can surprise beginners who expect that `width=200px` will produce an element 200 pixels wide in total. Browser developer tools offer a graphical visualization of the box model, which is particularly useful for diagnosing layout problems.<\/p>\n<div class=\"info-box\">\n<p><strong>Key point<\/strong> Each HTML element follows the box model: content + padding + border + margin, from the inside out.<\/p>\n<\/div>\n<div class=\"tuto-objectif\" style=\"background: #f5f5f5;border-left: 4px solid #667eea;padding: 16px 20px;margin-top: 24px;border-radius: 0 8px 8px 0\">\n<h3 style=\"color: #667eea;margin: 0 0 8px 0;font-size: 16px\">Key points to remember<\/h3>\n<p style=\"margin: 0;color: #333\">The CSS box model structures each element into four concentric zones: content, padding, border and margin, thus determining the dimensions and spacing of the elements.<\/p>\n<\/div>\n<div class=\"tuto-exercise\" style=\"background: #fff3e0;border-left: 4px solid #ff9800;padding: 16px 20px;margin-top: 20px;border-radius: 0 8px 8px 0\">\n<h4 style=\"color: #ff9800;margin: 0 0 8px 0;font-size: 15px\">\ud83c\udfaf Mini-exercise: Visualize the box model<\/h4>\n<p style=\"margin: 0;color: #333;font-size: 14px\">Create a box with content, padding, a border, and margins to observe how each property affects the appearance and dimensions of the element.<\/p>\n<\/div>\n<div class=\"codepen-block\" data-block-id=\"exercise-1\">\n<p class=\"codepen-block-label\">Reference code:<\/p>\n<div class=\"codepen-header\">\n<div class=\"codepen-tabs\">\n<button class=\"codepen-tab active\" data-tab=\"html\">HTML<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"css\">CSS<\/button>\n<\/div>\n<p><button class=\"codepen-copy-btn\">Copy<\/button>\n<\/div>\n<div class=\"codepen-code-container\">\n<pre class=\"codepen-code active\" data-lang=\"html\">&lt;div class=&quot;box-model-demo&quot;&gt;\n  &lt;p&gt;Box contents&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;div class=&quot;reference&quot;&gt;\n  &lt;p&gt;Reference element&lt;\/p&gt;\n&lt;\/div&gt;<\/pre>\n<pre class=\"codepen-code\" data-lang=\"css\">.box-model-demo { width: 200px; height: 100px; padding: 20px; border: 5px solid #667eea; margin: 30px; background-color: #f0f4ff; text-align: center; } .reference { width: 200px; height: 100px; background-color: #ffe0e0; border: 1px dashed #ff6b6b; text-align: center; } body { font-family: Arial, sans-serif; padding: 20px; }<\/pre>\n<\/div>\n<\/div>\n<div class=\"monaco-sandbox\" data-block-id=\"exercise-1\">\n<div class=\"monaco-header\">\n<div class=\"monaco-tabs\">\n<button class=\"monaco-tab active\" data-lang=\"html\">HTML<\/button><br \/>\n<button class=\"monaco-tab\" data-lang=\"css\">CSS<\/button>\n<\/div>\n<div class=\"monaco-actions\">\n<button class=\"monaco-btn monaco-btn-run\">\u25b6 Run<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-reset\">\u21ba Reset<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-save\">\ud83d\udcbe Save<\/button>\n<\/div>\n<\/div>\n<div class=\"monaco-container\">\n<div class=\"monaco-editor-wrapper\">\n<div class=\"monaco-editor-pane active\" data-lang=\"html\"><\/div>\n<div class=\"monaco-editor-pane\" data-lang=\"css\"><\/div>\n<\/div>\n<div class=\"monaco-preview-wrapper\">\n<div class=\"monaco-preview-header\">Result<\/div>\n<\/div>\n<\/div>\n<div class=\"monaco-status\">\n<span class=\"monaco-status-left\">\u25cf Ready<\/span><br \/>\n<span class=\"monaco-status-right\">Monaco Editor v0.45<\/span>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-la-mise-en-forme-css-item-2\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">02<\/span> Mastering margin, padding and border<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-la-mise-en-forme-css-item-2\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>The padding property: the interior space<\/h4>\n<p>Padding defines the space between an element&#039;s content and its border. This property is particularly useful for improving readability by preventing text or child elements from directly touching the edges of their container. Padding can be defined in several ways: with a single value (padding: 20px) that applies to all four sides, with two values (padding: 20px 10px) for vertical and horizontal orientations, or with four distinct values (padding: 10px 20px 30px 40px) in the order top, right, bottom, left. There are also specific properties `padding-top`, `padding-right`, `padding-bottom`, and `padding-left` for precise control over each side.<\/p>\n<h4>The margin property: the outside space<\/h4>\n<p>The margin controls the space around an element, creating a transparent area that separates it from its neighbors. Unlike padding, the margin is not part of the element&#039;s background and always remains transparent. The syntax is identical to that of padding, but the margin exhibits special behaviors, such as merging vertical margins between adjacent elements. An important feature is the ability to use negative values to create overlaps or specific visual effects. The `auto` value for the margin, in particular, allows you to horizontally center an element of a defined width.<\/p>\n<h4>The border property: the visible border<\/h4>\n<p>The border forms the visible boundary of the element and is located between the padding and the margin. A complete border requires three properties: width (border-width), style (border-style), and color (border-color). The shorthand syntax `border` allows you to define these three values in a single declaration (e.g., `border: 2px solid #333`). Border styles include solid, dashed, dotted, double, groove, ridge, inset, and outset. Each side can have its own border with `border-top`, `border-right`, `border-bottom`, and `border-left`. The `border-radius` property allows you to round the corners to create modern visual effects.<\/p>\n<div class=\"info-box\">\n<p><strong>Key point<\/strong> Padding = interior space, Margin = exterior space, Border = visible boundary between the two.<\/p>\n<\/div>\n<div class=\"tuto-objectif\" style=\"background: #f5f5f5;border-left: 4px solid #667eea;padding: 16px 20px;margin-top: 24px;border-radius: 0 8px 8px 0\">\n<h3 style=\"color: #667eea;margin: 0 0 8px 0;font-size: 16px\">Key points to remember<\/h3>\n<p style=\"margin: 0;color: #333\">Padding creates the interior space, margin the exterior space, and border the visible boundary. Each property can be defined globally or individually per side.<\/p>\n<\/div>\n<div class=\"tuto-exercise\" style=\"background: #fff3e0;border-left: 4px solid #ff9800;padding: 16px 20px;margin-top: 20px;border-radius: 0 8px 8px 0\">\n<h4 style=\"color: #ff9800;margin: 0 0 8px 0;font-size: 15px\">\ud83c\udfaf Mini-exercise: Create varied spacing<\/h4>\n<p style=\"margin: 0;color: #333;font-size: 14px\">Experiment with different margin, padding and border values on several elements to observe their visual effects and interactions.<\/p>\n<\/div>\n<div class=\"codepen-block\" data-block-id=\"exercise-2\">\n<p class=\"codepen-block-label\">Reference code:<\/p>\n<div class=\"codepen-header\">\n<div class=\"codepen-tabs\">\n<button class=\"codepen-tab active\" data-tab=\"html\">HTML<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"css\">CSS<\/button>\n<\/div>\n<p><button class=\"codepen-copy-btn\">Copy<\/button>\n<\/div>\n<div class=\"codepen-code-container\">\n<pre class=\"codepen-code active\" data-lang=\"html\">&lt;div class=&quot;container&quot;&gt;\n  &lt;div class=&quot;box box-1&quot;&gt;Important padding&lt;\/div&gt;\n  &lt;div class=&quot;box box-2&quot;&gt;Significant margin&lt;\/div&gt;\n  &lt;div class=&quot;box box-3&quot;&gt;Stylish border&lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n<pre class=\"codepen-code\" data-lang=\"css\">.container { background-color: #f8f9fa; padding: 20px; } .box { width: 150px; height: 80px; background-color: #e3f2fd; text-align: center; line-height: 80px; margin-bottom: 10px; } .box-1 { padding: 30px 15px; border: 2px solid #2196f3; } .box-2 { margin: 40px 20px; border: 1px solid #4caf50; background-color: #e8f5e8; } .box-3 { padding: 15px; border: 5px dotted #ff9800; border-radius: 10px; background-color: #fff3e0; }<\/pre>\n<\/div>\n<\/div>\n<div class=\"monaco-sandbox\" data-block-id=\"exercise-2\">\n<div class=\"monaco-header\">\n<div class=\"monaco-tabs\">\n<button class=\"monaco-tab active\" data-lang=\"html\">HTML<\/button><br \/>\n<button class=\"monaco-tab\" data-lang=\"css\">CSS<\/button>\n<\/div>\n<div class=\"monaco-actions\">\n<button class=\"monaco-btn monaco-btn-run\">\u25b6 Run<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-reset\">\u21ba Reset<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-save\">\ud83d\udcbe Save<\/button>\n<\/div>\n<\/div>\n<div class=\"monaco-container\">\n<div class=\"monaco-editor-wrapper\">\n<div class=\"monaco-editor-pane active\" data-lang=\"html\"><\/div>\n<div class=\"monaco-editor-pane\" data-lang=\"css\"><\/div>\n<\/div>\n<div class=\"monaco-preview-wrapper\">\n<div class=\"monaco-preview-header\">Result<\/div>\n<\/div>\n<\/div>\n<div class=\"monaco-status\">\n<span class=\"monaco-status-left\">\u25cf Ready<\/span><br \/>\n<span class=\"monaco-status-right\">Monaco Editor v0.45<\/span>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-la-mise-en-forme-css-item-3\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">03<\/span> Use box sizing correctly<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-la-mise-en-forme-css-item-3\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>The problem with the traditional box model<\/h4>\n<p>By default, CSS uses the &quot;content-box&quot; model, where the width and height properties apply only to the element&#039;s content. This means that the final dimensions include padding and border in addition to the defined width, which can complicate layout calculations. For example, an element with width: 200px, padding: 20px, and border: 5px will have a total width of 250px (200 + 20*2 + 5*2). This logic, while technically sound, is counterintuitive for many developers who expect width to represent the element&#039;s full visible width. This behavior can cause unexpected overflows and complicate the creation of accurate layouts.<\/p>\n<h4>The box-sizing solution: border-box<\/h4>\n<p>The `box-sizing: border-box` property fundamentally changes how dimensions are calculated. With this value, `width` and `height` include the content, padding, and border, but exclude the margin. This approach is much more intuitive because it corresponds to our natural perception of an element&#039;s size. An element with `width: 200px` and `box-sizing: border-box` will always be exactly 200px wide, regardless of the padding and border values. The content will automatically adjust to accommodate these internal spaces. This property has become so popular that many CSS frameworks apply it globally with the universal selector.<\/p>\n<h4>Recommended global implementation<\/h4>\n<p>The best practice is to apply `box-sizing: border-box` to all elements from the start of a project. The recommended technique uses the universal selector and pseudo-elements: `*`, `*::before`, `*::after` { `box-sizing: border-box; }`. This approach ensures consistency throughout the project and greatly simplifies layout calculations. Some developers prefer a more conservative approach by setting `box-sizing: border-box` on the `&lt;html&gt;` element and using inheritance, allowing for local exceptions if needed. This property does not affect margins, which continue to be added to the element&#039;s dimensions.<\/p>\n<div class=\"info-box\">\n<p><strong>Key point<\/strong> : box-sizing: border-box means that width includes content + padding + border, making calculations more intuitive.<\/p>\n<\/div>\n<div class=\"tuto-objectif\" style=\"background: #f5f5f5;border-left: 4px solid #667eea;padding: 16px 20px;margin-top: 24px;border-radius: 0 8px 8px 0\">\n<h3 style=\"color: #667eea;margin: 0 0 8px 0;font-size: 16px\">Key points to remember<\/h3>\n<p style=\"margin: 0;color: #333\">box-sizing: border-box changes the dimension calculation to include padding and border in width\/height, greatly simplifying layout.<\/p>\n<\/div>\n<div class=\"tuto-exercise\" style=\"background: #fff3e0;border-left: 4px solid #ff9800;padding: 16px 20px;margin-top: 20px;border-radius: 0 8px 8px 0\">\n<h4 style=\"color: #ff9800;margin: 0 0 8px 0;font-size: 15px\">\ud83c\udfaf Mini-exercise: Compare box models<\/h4>\n<p style=\"margin: 0;color: #333;font-size: 14px\">Create two identical elements with different box-sizing values to observe how this affects their final dimensions.<\/p>\n<\/div>\n<div class=\"codepen-block\" data-block-id=\"exercise-3\">\n<p class=\"codepen-block-label\">Reference code:<\/p>\n<div class=\"codepen-header\">\n<div class=\"codepen-tabs\">\n<button class=\"codepen-tab active\" data-tab=\"html\">HTML<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"css\">CSS<\/button>\n<\/div>\n<p><button class=\"codepen-copy-btn\">Copy<\/button>\n<\/div>\n<div class=\"codepen-code-container\">\n<pre class=\"codepen-code active\" data-lang=\"html\">&lt;div class=&quot;comparison&quot;&gt;\n  &lt;div class=&quot;box content-box&quot;&gt;\n    &lt;h3&gt;content-box (default)&lt;\/h3&gt;\n    &lt;p&gt;Width: 200px&lt;br&gt;Total width: 250px&lt;\/p&gt;\n  &lt;\/div&gt;\n  \n  &lt;div class=&quot;box border-box&quot;&gt;\n    &lt;h3&gt;border-box&lt;\/h3&gt;\n    &lt;p&gt;Width: 200px&lt;br&gt;Total width: 200px&lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n<pre class=\"codepen-code\" data-lang=\"css\">.comparison { display: flex; gap: 30px; flex-wrap:wrap; background-color: #f5f5f5; padding: 20px; } .box { width: 200px; padding: 20px; border: 5px solid #333; background-color: white; text-align: center; font-family: Arial, sans-serif; } .content-box { box-sizing: content-box; border-color: #e74c3c; } .border-box { box-sizing: border-box; border-color: #27ae60; } .box h3 { margin: 0 0 10px 0; color: #333; font-size: 16px; } .box p { margin: 0; font-size: 14px; color: #666; }<\/pre>\n<\/div>\n<\/div>\n<div class=\"monaco-sandbox\" data-block-id=\"exercise-3\">\n<div class=\"monaco-header\">\n<div class=\"monaco-tabs\">\n<button class=\"monaco-tab active\" data-lang=\"html\">HTML<\/button><br \/>\n<button class=\"monaco-tab\" data-lang=\"css\">CSS<\/button>\n<\/div>\n<div class=\"monaco-actions\">\n<button class=\"monaco-btn monaco-btn-run\">\u25b6 Run<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-reset\">\u21ba Reset<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-save\">\ud83d\udcbe Save<\/button>\n<\/div>\n<\/div>\n<div class=\"monaco-container\">\n<div class=\"monaco-editor-wrapper\">\n<div class=\"monaco-editor-pane active\" data-lang=\"html\"><\/div>\n<div class=\"monaco-editor-pane\" data-lang=\"css\"><\/div>\n<\/div>\n<div class=\"monaco-preview-wrapper\">\n<div class=\"monaco-preview-header\">Result<\/div>\n<\/div>\n<\/div>\n<div class=\"monaco-status\">\n<span class=\"monaco-status-left\">\u25cf Ready<\/span><br \/>\n<span class=\"monaco-status-right\">Monaco Editor v0.45<\/span>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-la-mise-en-forme-css-item-4\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">04<\/span> Solving margin merging problems<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-la-mise-en-forme-css-item-4\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>Understanding the merging of vertical margins<\/h4>\n<p>Margin collapsing is a CSS behavior specific to vertical margins where two adjacent margins combine to form a single margin. This occurs in three main situations: between adjacent sibling elements, between a parent and its first\/last child, and on empty elements. For example, if one element has `margin-bottom: 30px` and the following element has `margin-top: 20px`, the space between them will be 30px (the larger of the two) and not 50px as one might expect. This logic, inherited from the layout of text documents, aims to avoid excessive spacing between paragraphs and other content elements.<\/p>\n<h4>Special cases and exceptions<\/h4>\n<p>Margin merging only applies to the vertical margins (top and bottom) of normal flow elements (display: block). Horizontal margins never merge, nor do the margins of floated, absolutely positioned, or display-specific elements such as inline-block, flex, or grid. The parent-child relationship is particularly problematic: the top margin of the first child merges with the top margin of the parent, potentially creating unexpected effects where the spacing appears to &quot;bounce up&quot; above the parent container. This merging does not occur if the parent has padding, a border, or certain properties like overflow other than visible.<\/p>\n<h4>Techniques to avoid melting<\/h4>\n<p>Several strategies can be used to control or prevent margin merging depending on the context. Adding minimal padding to the parent element (padding: 1px 0) prevents merging with its children. Using `overflow: hidden` on the parent element creates a new formatting context and blocks merging. Modern layout techniques like Flexbox and CSS Grid naturally eliminate this problem. For precise spacing, padding can be used, or margin can be combined with a transparent border. In some cases, using `display: inline-block` or adding a pseudo-element with content can resolve merging issues while preserving the desired layout.<\/p>\n<div class=\"info-box\">\n<p><strong>Key point<\/strong> : Adjacent vertical margins merge automatically, keeping only the largest value.<\/p>\n<\/div>\n<div class=\"tuto-objectif\" style=\"background: #f5f5f5;border-left: 4px solid #667eea;padding: 16px 20px;margin-top: 24px;border-radius: 0 8px 8px 0\">\n<h3 style=\"color: #667eea;margin: 0 0 8px 0;font-size: 16px\">Key points to remember<\/h3>\n<p style=\"margin: 0;color: #333\">Margin merging only applies to adjacent vertical margins which combine into a single margin equal to the larger of the two values.<\/p>\n<\/div>\n<div class=\"tuto-exercise\" style=\"background: #fff3e0;border-left: 4px solid #ff9800;padding: 16px 20px;margin-top: 20px;border-radius: 0 8px 8px 0\">\n<h4 style=\"color: #ff9800;margin: 0 0 8px 0;font-size: 15px\">\ud83c\udfaf Mini-exercise: Observe the merging of margins<\/h4>\n<p style=\"margin: 0;color: #333;font-size: 14px\">Create elements with different vertical margins to observe the merging phenomenon and test solutions to avoid it.<\/p>\n<\/div>\n<div class=\"codepen-block\" data-block-id=\"exercise-4\">\n<p class=\"codepen-block-label\">Reference code:<\/p>\n<div class=\"codepen-header\">\n<div class=\"codepen-tabs\">\n<button class=\"codepen-tab active\" data-tab=\"html\">HTML<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"css\">CSS<\/button>\n<\/div>\n<p><button class=\"codepen-copy-btn\">Copy<\/button>\n<\/div>\n<div class=\"codepen-code-container\">\n<pre class=\"codepen-code active\" data-lang=\"html\">&lt;div class=&quot;demo-section&quot;&gt;\n  &lt;h3&gt;Margin merging (default)&lt;\/h3&gt;\n  &lt;div class=&quot;element margin-30&quot;&gt;Margin-bottom: 30px&lt;\/div&gt;\n  &lt;div class=&quot;element margin-20&quot;&gt;Margin-top: 20px&lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;div class=&quot;demo-section no-collapse&quot;&gt;\n  &lt;h3&gt;No merging (parent padding)&lt;\/h3&gt;\n  &lt;div class=&quot;element margin-30&quot;&gt;Margin-bottom: 30px&lt;\/div&gt;\n  &lt;div class=&quot;element margin-20&quot;&gt;Margin-top: 20px&lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n<pre class=\"codepen-code\" data-lang=\"css\">.demo-section { margin-bottom: 40px; background-color: #f8f9fa; border: 2px dashed #dee2e6; } .demo-section h3 { margin: 0; padding: 10px; background-color: #343a40; color:white; font-size: 14px; } .no-collapse { padding: 1px 0; \/* Prevent merging *\/ } .element { padding: 15px; background-color: #e9ecef; border: 1px solid #adb5bd; text-align: center; font-family: Arial, sans-serif; font-size: 14px; } .margin-30 { margin-bottom: 30px; background-color: #ffebee; border-color: #f44336; } .margin-20 { margin-top: 20px; background-color: #e8f5e8; border-color: #4caf50; }<\/pre>\n<\/div>\n<\/div>\n<div class=\"monaco-sandbox\" data-block-id=\"exercise-4\">\n<div class=\"monaco-header\">\n<div class=\"monaco-tabs\">\n<button class=\"monaco-tab active\" data-lang=\"html\">HTML<\/button><br \/>\n<button class=\"monaco-tab\" data-lang=\"css\">CSS<\/button>\n<\/div>\n<div class=\"monaco-actions\">\n<button class=\"monaco-btn monaco-btn-run\">\u25b6 Run<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-reset\">\u21ba Reset<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-save\">\ud83d\udcbe Save<\/button>\n<\/div>\n<\/div>\n<div class=\"monaco-container\">\n<div class=\"monaco-editor-wrapper\">\n<div class=\"monaco-editor-pane active\" data-lang=\"html\"><\/div>\n<div class=\"monaco-editor-pane\" data-lang=\"css\"><\/div>\n<\/div>\n<div class=\"monaco-preview-wrapper\">\n<div class=\"monaco-preview-header\">Result<\/div>\n<\/div>\n<\/div>\n<div class=\"monaco-status\">\n<span class=\"monaco-status-left\">\u25cf Ready<\/span><br \/>\n<span class=\"monaco-status-right\">Monaco Editor v0.45<\/span>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-la-mise-en-forme-css-item-5\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">05<\/span> CSS selectors and inline styles<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-la-mise-en-forme-css-item-5\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>The fundamental CSS selectors<\/h4>\n<p>CSS selectors allow you to precisely target HTML elements to style. The element selector (p, div, h1) targets all elements of the specified type. The class selector (.my-class) targets elements with the corresponding class attribute, while the ID selector (#my-id) targets a single element with the specified id attribute. Selectors can be combined: p.intro targets paragraphs with the class &quot;intro&quot;, div1TP5Header targets a specific div with the ID &quot;header&quot;. Descendant selectors (div p) allow you to target nested elements, while direct child selectors (div &gt; p) target only immediate children. This flexibility allows for very precise control over formatting.<\/p>\n<h4>Inline styles and their priority<\/h4>\n<p>Inline styles are defined directly in the style attribute of the HTML element (&lt;div style=&quot;&nbsp;&raquo;color:&quot; red;&nbsp;&raquo;&gt;This method has the advantage of simplicity and immediacy, particularly useful for quick tests or very specific styles. However, inline styles have very high specificity in the CSS cascade, meaning they override virtually all other styles defined in external or internal stylesheets. This high priority can make maintenance and subsequent modifications difficult, as it becomes complicated to override these styles without using !important or other inline styles.<\/p>\n<h4>CSS cascading and best practices<\/h4>\n<p>The CSS cascade determines which styles apply when multiple rules target the same element. The order of precedence follows this logic: inline styles (highest specificity), IDs, classes and attributes, then elements. If specificity is equal, the last declared rule takes precedence. Best practices recommend avoiding inline styles in favor of reusable CSS classes, organizing stylesheets logically, and prioritizing natural specificity over !important. A well-designed CSS architecture uses a consistent naming convention (like BEM) and clearly separates structure (HTML) from presentation (CSS), thus facilitating project maintenance and evolution.<\/p>\n<div class=\"info-box\">\n<p><strong>Key point<\/strong> : CSS selectors allow for precise targeting, but inline styles have a very high priority in the cascade.<\/p>\n<\/div>\n<div class=\"tuto-objectif\" style=\"background: #f5f5f5;border-left: 4px solid #667eea;padding: 16px 20px;margin-top: 24px;border-radius: 0 8px 8px 0\">\n<h3 style=\"color: #667eea;margin: 0 0 8px 0;font-size: 16px\">Key points to remember<\/h3>\n<p style=\"margin: 0;color: #333\">CSS selectors offer targeting flexibility, but inline styles, while convenient, have high specificity that can complicate maintenance.<\/p>\n<\/div>\n<div class=\"tuto-exercise\" style=\"background: #fff3e0;border-left: 4px solid #ff9800;padding: 16px 20px;margin-top: 20px;border-radius: 0 8px 8px 0\">\n<h4 style=\"color: #ff9800;margin: 0 0 8px 0;font-size: 15px\">\ud83c\udfaf Mini-exercise: Testing selectors and specificity<\/h4>\n<p style=\"margin: 0;color: #333;font-size: 14px\">Create elements with different selectors and inline styles to observe how the CSS cascade determines the styles applied.<\/p>\n<\/div>\n<div class=\"codepen-block\" data-block-id=\"exercise-5\">\n<p class=\"codepen-block-label\">Reference code:<\/p>\n<div class=\"codepen-header\">\n<div class=\"codepen-tabs\">\n<button class=\"codepen-tab active\" data-tab=\"html\">HTML<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"css\">CSS<\/button>\n<\/div>\n<p><button class=\"codepen-copy-btn\">Copy<\/button>\n<\/div>\n<div class=\"codepen-code-container\">\n<pre class=\"codepen-code active\" data-lang=\"html\">&lt;div class=&quot;container&quot;&gt;\n  &lt;h2&gt;CSS Specificity Test&lt;\/h2&gt;\n  \n  &lt;p class=&quot;text-style&quot;&gt;Paragraph with class (green)&lt;\/p&gt;\n  \n  &lt;p class=&quot;text-style&quot; id=&quot;special-text&quot;&gt;Paragraph with class + ID (blue)&lt;\/p&gt;\n  \n  &lt;p class=&quot;text-style&quot; style=&quot;color: red;&quot;&gt;Paragraph with inline style (red)&lt;\/p&gt;\n  \n  &lt;div class=&quot;box-demo&quot;&gt;\n    &lt;p&gt;Paragraph within a div (orange by inheritance)&lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n<pre class=\"codepen-code\" data-lang=\"css\">\/* Element selector - low specificity *\/ p { color: gray; font-size: 16px; margin-bottom: 10px; } \/* Class selector - medium specificity *\/ .text-style { color: green; font-weight: bold; } \/* ID selector - high specificity *\/ #special-text { color: blue; text-decoration: underline; } \/* Descending selector *\/ .box-demo { color: orange; background-color: #fff3e0; padding: 15px; border-radius: 5px; border: 2px solid #ff9800; } .container { font-family: Arial, sans-serif; max-width: 600px; padding: 20px; } .container h2 { color: #333; border-bottom: 2px solid #667eea; padding-bottom: 5px; }<\/pre>\n<\/div>\n<\/div>\n<div class=\"monaco-sandbox\" data-block-id=\"exercise-5\">\n<div class=\"monaco-header\">\n<div class=\"monaco-tabs\">\n<button class=\"monaco-tab active\" data-lang=\"html\">HTML<\/button><br \/>\n<button class=\"monaco-tab\" data-lang=\"css\">CSS<\/button>\n<\/div>\n<div class=\"monaco-actions\">\n<button class=\"monaco-btn monaco-btn-run\">\u25b6 Run<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-reset\">\u21ba Reset<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-save\">\ud83d\udcbe Save<\/button>\n<\/div>\n<\/div>\n<div class=\"monaco-container\">\n<div class=\"monaco-editor-wrapper\">\n<div class=\"monaco-editor-pane active\" data-lang=\"html\"><\/div>\n<div class=\"monaco-editor-pane\" data-lang=\"css\"><\/div>\n<\/div>\n<div class=\"monaco-preview-wrapper\">\n<div class=\"monaco-preview-header\">Result<\/div>\n<\/div>\n<\/div>\n<div class=\"monaco-status\">\n<span class=\"monaco-status-left\">\u25cf Ready<\/span><br \/>\n<span class=\"monaco-status-right\">Monaco Editor v0.45<\/span>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2>Summary<\/h2>\n<div class=\"tuto-recap\" style=\"background: #f5f5f5;border-left: 4px solid #9c27b0;padding: 16px 20px;border-radius: 0 8px 8px 0\">\n<h3 style=\"color: #9c27b0;margin: 0 0 12px 0;font-size: 16px\">Key points to remember<\/h3>\n<ul style=\"margin: 0;padding-left: 20px;color: #333\">\n<li><strong>Box model<\/strong> Each element follows the structure content + padding + border + margin<\/li>\n<li><strong>Spacing properties<\/strong> Padding (inside), margin (outside), and border (visible border) control the layout<\/li>\n<li><strong>Box-sizing border-box<\/strong> Includes padding and border in the width\/height dimensions for intuitive calculations.<\/li>\n<li><strong>Margin merging<\/strong> Adjacent vertical margins automatically combine, keeping the largest value<\/li>\n<li><strong>Cascade CSS<\/strong> Inline styles have the highest priority, followed by IDs, classes, and then elements.<\/li>\n<\/ul>\n<\/div>\n<h2>Sources<\/h2>\n<div class=\"sources-box\" style=\"background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);border: 1px solid #cbd5e1;border-radius: 12px;padding: 16px;margin-bottom: 24px\">\n<p style=\"color: #64748b;margin: 0 0 12px 0;font-size: 13px\">To deepen your knowledge:<\/p>\n<ul style=\"margin: 0;padding-left: 0\">\n<li style=\"margin-bottom: 8px\">\n<a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Learn\/CSS\/Building_blocks\/The_box_model\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"align-items: center;gap: 10px;padding: 10px 14px;background: white;border-radius: 8px;text-decoration: none;color: #1e293b;border: 1px solid #e2e8f0\"><br \/>\n<span style=\"color: #94a3b8\">\ud83d\udd17<\/span><br \/>\n<span style=\"flex: 1;font-weight: 500;color: #0f172a\">MDN \u2013 The CSS Box Template<\/span><br \/>\n<span style=\"color: #94a3b8\">\u2192<\/span><br \/>\n<\/a>\n<\/li>\n<li style=\"margin-bottom: 0\">\n<a href=\"https:\/\/css-tricks.com\/box-sizing\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"align-items: center;gap: 10px;padding: 10px 14px;background: white;border-radius: 8px;text-decoration: none;color: #1e293b;border: 1px solid #e2e8f0\"><br \/>\n<span style=\"color: #94a3b8\">\ud83d\udd17<\/span><br \/>\n<span style=\"flex: 1;font-weight: 500;color: #0f172a\">CSS Tricks \u2013 Box Sizing<\/span><br \/>\n<span style=\"color: #94a3b8\">\u2192<\/span><br \/>\n<\/a>\n<\/li>\n<\/ul>\n<\/div>\n<h2>Validate your knowledge<\/h2>\n<p>Test your understanding with this 10-question quiz:<\/p>\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-la-mise-en-forme-css.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>CSS Formatting: Discover the secrets of CSS formatting and master the box model, a fundamental element for creating harmonious and professional web interfaces. This training will allow you to understand and effectively use the margin, padding, border, and box-sizing properties. Module: Module 1: Web Technical Fundamentals\u2026 <a href=\"https:\/\/lmspro.fr\/en\/la-mise-en-forme-css-2\/\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> \u00ab\u00a0La mise en forme CSS\u00a0\u00bb<\/span> &raquo;<\/a><\/p>","protected":false},"author":1,"featured_media":445,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30],"tags":[34,25,26,132,27,28,133,2],"class_list":["post-444","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-module-1-fondamentaux-techniques-du-web","tag-accessibilite","tag-animation","tag-css","tag-fondamentaux-web","tag-html","tag-javascript","tag-js","tag-ux"],"_links":{"self":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/444","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=444"}],"version-history":[{"count":1,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/444\/revisions"}],"predecessor-version":[{"id":474,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/444\/revisions\/474"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media\/445"}],"wp:attachment":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media?parent=444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/categories?post=444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/tags?post=444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}