Forem: Jomagene

Comparing Frontend Technologies: ReactJS vs. Pure HTML, CSS, and JavaScript

Jomagene — Sat, 29 Jun 2024 21:51:27 +0000

Introduction

Hey there! If you're diving into frontend development, you’ve probably come across a bunch of different tools and frameworks. Today, I want to chat about two different approaches: using ReactJS and sticking with the basics—pure HTML, CSS, and JavaScript.

Recently, while working on a project with a friend, she asked me, “Why bother with React when we can quickly get the job done using just HTML, CSS, and JavaScript?”
I laughed but realized it’s a great question. Every developer faces this dilemma at some point: why choose one technology over another? So, let’s dive into the comparison and see what each approach offers, with a sprinkle of humor along the way.

What is ReactJS?

ReactJS is like the cool kid in the JavaScript world. Created by Facebook, it helps developers build user interfaces, especially for single-page applications where data changes more often than the weather.

Key Features of ReactJS:

Component-Based Architecture: Imagine building your UI like a LEGO set. React lets you snap together reusable components, making your code more organized and easier to manage.
Virtual DOM: Instead of updating the actual DOM (which can be as slow as a Monday morning), React updates a virtual version first, speeding things up.
Declarative Syntax: You just describe what you want your UI to look like, and React takes care of the nitty-gritty details.
Rich Ecosystem: There’s a ton of libraries and tools that work with React, so you can find a solution for almost any problem. It’s like having a Swiss Army knife for web development.

Pure HTML, CSS, and JavaScript

On the flip side, developing with pure HTML, CSS, and JavaScript means you’re writing everything from scratch. It’s like cooking a gourmet meal without pre-made ingredients—you have total control, but it’s a lot of work!

Key Features of Pure HTML, CSS, and JavaScript:

Direct Control: You have complete control over every aspect of your web application. It's like being the king or queen of your code kingdom.
Simplicity: This approach is perfect for small projects or static websites where you don’t need the extra weight of a framework.
Performance: With no extra layers, your site can be as fast as a cheetah on espresso.
Fundamental Knowledge: Mastering these core technologies is essential for any web developer. It's like learning to ride a bike before driving a car.

Comparing ReactJS and Pure HTML, CSS, and JavaScript

Development Speed: React’s reusable components can speed up development, especially for bigger projects. Pure HTML, CSS, and JavaScript might take more time to manage as your project grows, like trying to juggle flaming torches.
Scalability: React is built to handle large, dynamic applications easily. Pure HTML, CSS, and JavaScript can get tricky to maintain as your project scales, like trying to keep a house of cards from falling.
Learning Curve: React has a bit of a learning curve because of its ecosystem and concepts like JSX and hooks. Pure HTML, CSS, and JavaScript are the basics every web developer should know—like the ABCs of web development.
Maintenance: React’s modular approach makes it easier to update and maintain your code. Pure HTML, CSS, and JavaScript can become more error-prone and harder to manage in larger codebases, like trying to herd cats.

My Experience with ReactJS

I’ve spent a lot of time working with ReactJS, and I’ve really come to appreciate its power and efficiency. The ability to create reusable components and manage state effectively has changed the way I build web applications. Plus, the React community is super active, which means there’s always a new tool or resource to help you out. It’s like being part of a massive, nerdy family.

Expectations for HNG Internship

As part of the HNG Internship, I’m excited to sharpen my ReactJS skills, work with other talented developers, and get involved in some cool projects. This internship is a fantastic opportunity to learn best practices from industry experts and apply them to real-world scenarios. I can’t wait to see what we’ll build together!

Conclusion

Both ReactJS and pure HTML, CSS, and JavaScript have their strengths. ReactJS is great for building complex, dynamic applications, while pure HTML, CSS, and JavaScript offer simplicity and control, perfect for smaller projects.

If you’re interested in learning more about the HNG Internship, check out these links:

Call to Action

I’d love to hear your thoughts on ReactJS versus pure HTML, CSS, and JavaScript. Which do you prefer and why? Drop a comment below and let’s chat! Let’s make this a fun conversation—after all, we’re all here to learn and grow together.

Journey Through the Digital Cosmos: The Internet Vs the World Wide Web

Jomagene — Mon, 06 May 2024 01:36:52 +0000

In the vast expanse of technological innovation, the terms "Internet" and "World Wide Web" are often used interchangeably, creating an illusion of synonymity. However, for us, the trailblazers in the realm of technology, particularly those who have navigated the initial labyrinth of confusion, distinguishing between these terms is not merely a matter of semantics—it forms the cornerstone of our understanding as we architect and engage with digital systems. So, let's embark on an enlightening odyssey to elucidate and distinguish these pivotal concepts.

The Internet: The Lifeline of Global Connectivity

The Internet, a formidable structure birthed from the visionary ARPANET project of the 1960s, is the global network that underpins all forms of data exchange and connectivity. It's the dynamo powering everything from email correspondences and secure banking transactions to multiplayer online gaming and the marvel of cloud computing.

The World Wide Web: The Gateway to the Information Universe

Conceived from Tim Berners-Lee’s revolutionary vision in 1991, the Web transformed the intricate infrastructure of the Internet into an accessible and user-friendly platform. It’s built on HTTP, the protocol that weaves documents and media from around the globe into a seamlessly navigable experience, enabling us to traverse websites and applications with the ease of a click.

Distinguishing the Digital Titans

Chronology and Purpose: The Internet’s infrastructure was firmly established decades before the Web spun its first hyperlink. Their core missions diverge: the Internet was engineered as a communication powerhouse, while the Web was devised to make accessing and sharing information intuitive and immediate.

Technical Foundations: While the Internet operates on a diverse array of protocols (TCP/IP, SMTP, FTP), the Web primarily dwells in the domain of HTTP and HTML, the standards for web pages that we develop and interact with daily.

Functionality in Practice: When you send an email, stream a podcast, or engage in an FTP session, you’re harnessing the power of the Internet. But when you’re browsing through sites on Chrome or Firefox, you’re navigating the labyrinth of the World Wide Web.

Bridging Concepts for Technologists

For us, the pioneers in the tech field, understanding the Internet and the Web as distinct yet interconnected entities is crucial. The Internet provides the infrastructure—the grand stage upon which the drama of the Web unfolds. The Web, with its user-friendly interfaces and protocols, makes this infrastructure accessible and beneficial for the general public, and indeed for us as technologists when crafting new solutions.

By understanding the nuanced yet distinct roles of the Internet and the World Wide Web, we can better navigate and innovate within this space, ensuring we leverage each component effectively to enhance our development practices and end-user experiences. This foundational knowledge isn't merely academic—it's a critical pillar in our continuous journey as technologists in the perpetually evolving tech cosmos.

Navigating the Stormy Waters of Git Merge Conflicts: A Guide for basic git conflicts

Jomagene — Sat, 20 Apr 2024 21:08:48 +0000

Merge conflicts in Git can feel like a sudden storm in the calm seas of coding. They disrupt the work flow and can be intimidating for both new and experienced developers alike. However, with the right knowledge and tools, resolving these conflicts can be straightforward and even become a routine part of a developer’s workflow. In this guide, we'll explore the nature of merge conflicts, how to effectively resolve them, and best practices to minimize their occurrence.

Understanding Merge Conflicts

A merge conflict occurs when Git is unable to automatically resolve differences in code between two commits. This typically happens when two branches have made edits to the same line of a file or when one branch deletes a file while another modifies it. For developers working in teams, conflicts are a common scenario, especially in large projects with frequent updates.

Common Scenarios Leading to Merge Conflicts

Simultaneous Edits: Two branches modify the same part of the same file differently.
Deletions and Modifications: One branch deletes a file while another branch is making changes to it.
Divergent Branch Strategies: Long-running branches that diverge significantly from the main branch can lead to complex conflicts.

How to Resolve Merge Conflicts

When a conflict occurs, Git will pause the merge process, allowing you to manually resolve the issues. The steps to handle a merge conflict can be outlined as follows:

1 . Identify Conflicted Files:
Use the command git status to list the files with conflicts.

   $ git status

2 . Examine the Differences:
Open the conflicted file and you will see markers that delineate the conflicting changes:

   <<<<<<< HEAD
   <div id="footer">contact : email.support@github.com</div>
   =======
   <div id="footer">
   please contact us at support@github.com
   </div>
   >>>>>>> iss53

Here, the HEAD pointer shows the current branch version, and the iss53 marks the incoming branch version.

3 . Resolve the Conflicts:
Edit the file to merge the changes manually. This may involve choosing one side's changes, merging elements of both sides, or writing new code.

4 . Mark the Conflict as Resolved:
Use git add to stage the resolved file. This signals to Git that the conflict has been dealt with.

   $ git add <file>

5 . Complete the Merge:
With all conflicts resolved and the changes staged, use git commit to complete the merge. Git will present a default commit message detailing the merge, which you can modify if necessary.

   $ git commit

Tools for Resolving Conflicts

For those who prefer a visual approach, several tools can facilitate the resolution process:

Built-in tools like git mergetool: Launches a graphical tool to help resolve conflicts. Popular tools include Meld, Beyond Compare, and KDiff3.

  $ git mergetool

IDEs and Editors: Most integrated development environments (IDEs) and code editors like Visual Studio Code, IntelliJ IDEA, and Atom provide GUI-based conflict resolution features.

Best Practices to Avoid Merge Conflicts

While conflicts are sometimes inevitable, the following strategies can minimize their frequency and severity:

Frequent Commits: Smaller, more frequent commits can reduce the complexity of merges.
Regular Pulls: Regularly pulling changes from the main branch into feature branches keeps branches up-to-date and minimizes divergence.
Communication: Coordinate with team members when working on the same files or features.
Branch Management: Keep branch lifetimes short and integrate changes regularly.

Conclusion

Merge conflicts in Git, while challenging, are a manageable aspect of collaborative software development. Understanding how to effectively resolve these conflicts ensures that development processes run smoothly and efficiently. With the right strategies and tools, developers can turn the daunting task of resolving merge conflicts into a simple routine, allowing the team to focus on what they do best: building great software.

Guide to semantic HTML5 tags!

Jomagene — Sun, 14 Apr 2024 08:56:13 +0000

Semantics, the study of meaning in the fields of linguistics and logic, plays a crucial role in web development. By using semantic HTML, we assign a clear identity to the content of our pages through various tags.

From an HTML perspective, tags fall into two categories:

Semantic tags, which clearly define the content they enclose. For example, <p> denotes a paragraph, <h1> indicates a main title.
Non-semantic tags, such as <div> and <span>, which do not intrinsically convey information about their content.

The Div Trap

Web developers often fall into the trap of overusing <div> and <span> tags, a phenomenon affecting both novices and seasoned developers alike. Despite the obvious advantages of semantic HTML, moving away from reliance on <div> can be challenging.

Many websites use standard structures with common sections like headers, footers, and navigation bars. Caught in the div trap, developers often mark these areas as follows:

<div class="header">
    <div class="nav-bar">
        <span class="home">Home</span>
        <span class="service">Service</span>
        <span class="contact">Contact</span>
    </div>
</div>

Unfortunately, this practice does not convey any semantic information to browsers since they do not understand this style of language.

Why You Should Adopt Semantic Tags

Improved Accessibility: Using elements like <header>, <section>, and <article> makes content more accessible and navigable, especially for users of assistive technologies, thus broadening your audience.
Better SEO: Semantic tags act as indicators for search engines, improving your site's visibility and ranking.
Efficient Maintenance and Collaboration: Reducing the use of <div> simplifies code, facilitating collaboration and updates.
Prepared for the Future: The web is constantly evolving; using semantic HTML helps your projects stay relevant and functional.

Whether you're new to the field or an expert, the challenge is to fully embrace semantic HTML5, break old habits, and enjoy a better-structured, more accessible web. Breaking this cycle requires a conscious commitment to prioritize semantics and accessibility. This journey may take some out of their comfort zone, but the result—a more inclusive and sustainable web—is well worth the effort.

How to Choose the Right Semantic Tag

Wondering about the proper use of semantic tags? We'll dive into the details to help you choose the right tag for each piece of content. In terms of the HTML specification, the elements we will be looking at fall into one of three groups:

Sectioning elements, for broad strokes on an HTML page, like headers, footers, sections, and sidebar areas.
Grouping elements, which are used to wrap associated elements. Think of paragraphs, blockquotes, and related content.
Text-level semantics, which designate particulars, like <b>, <i>, <em>, <strong> tags.

Let's see some of the common used tags:

a. The <main> Element

Meet the <main> element in HTML5—it's perfect for highlighting the main part of your webpage. This tag helps clearly show what's unique about each page, ensuring it doesn't get mixed up with repeating elements, like navigation links or footers.

Just remember two simple rules: only use one <main> per page to keep things clear, and don't place it inside other specific tags like <article>, <aside>, <header>, <footer>, or <nav>. Using <main> correctly makes your website easier to understand and use.

<!-- Header -->
<main>
    Our main content
</main>
<!-- Footer -->

b. The <section> Element

The <section> element organizes different parts of a webpage or application into clear segments. For example, you might use one <section> for contact information and another for news feeds. It's important to remember that <section> is not for styling purposes; if you just want to style a part of your page, you should use a <div> instead.

Using <section> to wrap visual components, helps clearly identify where each component starts and ends in the code.

Decide if you should use a <section> by checking if the content has a natural heading (like h1 to h6). If it doesn't, you're probably better off using a <div>.

<main>
    <section class="contact-infos">
    </section>
    <section class="newsfeeds">
    </section>
    ...
</main>

c. The <nav> Element

The <nav> element in HTML5 is ideal for grouping major navigation links that direct users to different pages or sections of the same page. While it's typically not used for footers, it can be used there too. Instead of using an unordered list (<ul>) with list items (<li>), try using <nav> with nested <a> tags (links) for a cleaner and more appropriate structure. This approach is especially suited for primary navigation areas.

<nav>
    <a href="#home">Home</a>
    <a href="#service">Services</a>
    ...
</nav>

d. The <article> Element

The <article> element in HTML5 groups content that stands on its own. Ask yourself: If I moved this content to another website, would it still make complete sense? Or, would this content work as a separate article in an RSS feed? Good examples of when to use <article> include blog posts and news stories.

<main>
    <section class="contact-infos">
    </section>
    <section class="newsfeeds">
       <article>My post</article>
    </section>
    ...
</main>

e. The <aside> Element

The <aside> element in HTML is great for content that isn't the main focus but still relates to the main story, such as sidebars or tips in a blog post. It's also suitable for pull quotes, ads, and navigation links. For example, on an e-commerce site, the "Customers who bought this also bought" section would fit well in an <aside>. Use it for anything that supports but isn't central to your main content.

f. The <header> Element

The <header> element is versatile. You can use it for the top part of a website, called the "masthead," or as an introduction at the start of different sections, like articles. Feel free to use multiple headers on the same page—one for each section if you like!

<header>The masthead</header>
<main>
    <section class="contact-infos">
    </section>
    <section class="newsfeeds">
        <header>The newsfeed section head</header>
    </section>
    ...
</main>

g. The <footer> Element

The <footer> element in HTML5 is similar to the <header>. It is used for displaying information related to the content around it, such as copyright information or links to other documents. You can use multiple footers on one page, such as one for the overall blog and another within an individual blog post.

However, if you're adding contact information for the blog post's author, use the <address> element instead of putting it in the footer. This helps keep your page organized and makes the type of information clear to users.

In this example, the footer contains contact information and a copyright notice.

<footer>
     <address>
          For more details, contact
          <a href="mailto:semjomagene@example.com">Sem Joel Magene</a>.
     </address>
     <p><small>© Copyright 2038 Example Corp.</small></p>
</footer>

Note on The HTML5 Outline Algorithm

In simple HTML documents, you typically start with an <h1> tag for the main title and use lower-level heading tags (<h2>, <h3>, etc.) for subtitles. However, HTML5 introduced a feature that allows each section of your document to have its own headings independently. This means you no longer have to worry about the heading levels for the entire document. Instead, you can focus on the headings within each specific section you are working on. For example, in a blog, both the post titles and the blog's main title can use <h1> tags independently, thanks to this feature.

h. H1-H6 and <hgroup> Elements

When creating web pages, it's best to use heading tags (h1 to h6) for main section titles only and not for their subheadings. For example, instead of:

<h1>Scones:</h1>
<h2>The most resplendent of snacks</h2>

Consider using a different approach like this:

<hgroup>
  <h1>Scones:</h1>
  <p>The most resplendent of snacks</p>
</hgroup>

Here, hgroup holds the main heading and the subheading, but the subheading is in a paragraph tag (p) instead of a heading tag (h2). This helps keep your page structure clear and simple.

Grouping Elements

We’ve now covered the lion’s share of the HTML sectioning elements. Let’s now consider grouping elements, like the one we’ve just seen. These elements are used to contain groups of other elements.

i. The <div> Element

This is the most common way to group parts of a webpage. It's used a lot because it doesn't suggest any particular meaning—it simply groups content. However, it's best to use <div> only when no other element fits your needs. HTML has many other elements, and learning to use them can help you find better matches for your content.

j. The <p> Element

This element is for marking paragraphs, but it's not just for short texts. Use it for any text that doesn't fit better in another element. It's a better choice than <div> for general text because it specifically indicates that the content is a paragraph.

k. The <blockquote> Element

In the world of HTML, the <blockquote> tag is your go-to when you need to highlight text quoted from another source. You don't necessarily need to encase the quoted text in another element, but you certainly can, like wrapping it with a <p> tag for added structure. Here’s an example:

<p>I did like Ben's book, but he kept going on about scones. For example:</p>
<blockquote>
    All this writing about scones in our sample page and there's no image of the beauties! I'm going to add an image of a scone near the top of the page; a sort of 'hero' image to entice users to read the page.
</blockquote>

l. The <figure> and <figcaption> Elements

The <figure> element in HTML is perfect for wrapping visuals like illustrations, photos, or code snippets, with the optional <figcaption> to add a text description. While the alt attribute is crucial for accessibility, providing a <figcaption> is optional—use it if you want to explain or comment on the visual directly alongside it.

<figure class="MoneyShot">
  <img class="MoneyShotImg" src="img/scones.jpg" alt="Incredible scones baked to perfection and ready to eat" />
  <figcaption class="ImageCaption">
    This image isn't of scones I have made, instead, it's a stock photo from Wikipedia
  </figcaption>
</figure>

m. The <details> and <summary> Elements

Modern HTML gives us cool tools like the <details> and <summary> elements to create expandable sections in web pages. Here’s a quick example:

<details>
    <summary>I ate 15 scones in one day</summary>
    <p>
        Of course I didn't. It would probably kill me if I did. What a way
        to go. Mmmmmm, scones!
    </p>
</details>

Click the summary, and voilà! The text expands. Click again, and it collapses. Want it open from the start? Just add the open attribute to the <details> tag. However, without some JavaScript, these elements won't automatically close others when one is opened. Despite this limitation, <details> and <summary> are still great for adding simple toggle functionality to your site, far more neatly than the old display: none; trick on a <div>.

HTML Text-Level Semantic Elements

Before HTML5, what we now refer to as text-level semantic elements were called inline elements. If you're familiar with that term, you're already on the right track! Let’s dive into the most common and useful text-level elements to get a better understanding of them.

n. The <span> Element

The <span> element is like the simpler, text-focused cousin of the <div>. It's the go-to choice when you need to style a section of text without adding any extra meaning or structure. It's straightforward and ideal for those little tweaks to your text.

o. The <b> Element

Traditionally, the <b> element in HTML was used to make text bold. But its modern definition has shifted; now, the <b> tag is used to highlight text for practical reasons, such as drawing attention to keywords or product names, without implying any extra emphasis or change in tone.

b {
  font-weight: normal;
}

This CSS tweak helps ensure that the text within <b> tags appears as intended without automatic bolding.

p. The <strong> Element

When you need to highlight text because it's crucial, urgent, or serious, the <strong> element is your go-to tool. Use it to make parts of a heading, caption, or paragraph stand out as especially important. It's perfect for spotlighting key details in a sea of text. Additionally, <strong> works great for emphasizing warnings or urgent notices, ensuring that these critical messages catch the user's eye quickly. Keep this in mind to make essential information pop on your page.

q. The <em> Element

Often misused just to make text italic, the <em> tag in HTML is actually meant to represent stress emphasis on its contents, not just to style text as italic.

r. The <i> Element

In HTML5, the <i> element isn't just for making text italic. It's meant to give a different voice or mood to a span of text, setting it apart from the rest in a meaningful way. For instance, you might use it to highlight a scientific name in a paragraph or to indicate a special note like "No Salt Added" on a menu item in a web app.

<p>However, discussion on the frameset element is now frustraneous as it's now gone the way of the <i>Raphus cucullatus</i>.</p>
<button type="button">French Fries <i>No Salt Added</

i></button>

s. The <code> Element

For developers, the <code> element is indispensable when discussing code directly in HTML documents. It wraps code snippets, preserving the integrity of programming-related text and ensuring that it's easily recognizable as code.

Le phénomène d'effondrement de marge en CSS expliqué!

Jomagene — Mon, 07 Aug 2023 10:19:35 +0000

Introduction

La mise en page, la lisibilité et l'espacement sont quelques-uns des grands défis que pose le développement d'un site web.
Au cours de la conception, on rencontre des défis qui, suite à un manque d'information, constituent un casse-tête et une source de grande frustration par la suite.

Pourquoi ces écarts de marge entre certains blocs de ma page web? Et comment comprendre que des marges disparaissent? Et pourquoi cette marge-là semble-t-elle s’appliquer à mon conteneur et pas à mon titre ou mon paragraphe? Il se pourrait que vous êtes entrain de faire face au phénomène de fusion des marges.

Cet article va répondre à toutes ces questions.
Tout d'abord:...

Le phénomène de fusion de marge, comment le comprendre?

L’effondrement ou la fusion des marges est un phénomène assez simple à comprendre.
Il peut cependant être très déroutant lorsque vous travaillez à la structuration des mises en page. Lorsque deux marges verticales se rencontrent, elles s’effondrent l’une sur l’autre pour n’en former plus qu’une. La hauteur de cette marge fusionnée est égale à la hauteur de la plus grande des deux.

L’effondrement ou fusion des marges se produit si on est dans un des cas suivants :

a. Des éléments voisins adjacents

Lorsque deux éléments se trouvent l’un directement en dessous de l’autre, la marge inférieure du premier élément fusionne avec la marge supérieure du second sauf quand le dernier voisin doit passer à la ligne pour dégager les flottements. C’est le cas de l'illustration à la Figure 1.

Figure 1 : Exemple d’élément dont la marge supérieure fusionne avec celle de l’élément précédent.

A la figure 1, l'élément supérieur a une marge inférieure de 30 pixels et l'élément inférieur a une marge supérieure définie à 20 pixels. Le bon sens semblerait suggérer que la marge verticale entre ces deux éléments soit d’un total de 30px + 20px, soit de 50px. Mais en raison de l'effondrement de la marge, la marge réelle finit par être de 30 pixels.

b. Aucun contenu séparant le parent et ses descendants

Lorsqu’un élément est contenu dans un autre élément et qu’il n’existe pas de remplissage de bordure, de contenu en ligne (inline), de contexte de formatage de blocs ou dégagement, de height, min-height ou max-height pour séparer les marges hautes ou basses d’un ou plusieurs blocs descendants avec celles de leur parent, il s’en suit des fusionnements (voir Fig. 2).
La marge fusionnée termine en dehors de l’élément parent.

Figure 2 : Exemple d’élément dont la marge supérieure se fusionne avec la marge supérieure de son élément parent.

c. Des blocs vides

Aussi étrange que cela puisse paraître, les marges peuvent s’effondrer sur elles-mêmes. Si un élément vide possède une marge mais sans bordure ni remplissage, la marge supérieure touche la marge du bas et les deux fusionnent (voir Fig. 3).
Cela sous condition qu’il n'y ait aucune bordure, remplissage, contenu en ligne, height ou min-height pour séparer la marge haute d'un bloc de sa marge basse.

Figure 3 : Exemple d’élément dont la marge supérieure fusionne avec la marge inférieure.

--> Si cette marge touche la marge d’un autre élément, elle s’effondre elle-même à nouveau (voir Fig. 4).

Figure 4 : Exemple de marge effondrée d’un élément vide qui fusionne avec les marges d’un autre élément vide.

C’est pour cette raison que les séries d’éléments de paragraphe vides ne prennent que très peu d’espace, car toutes les marges s’effondrent et fusionnent pour n’en former plus qu’une.

On peut avoir des cas de fusion plus complexes lorsque ces cas de figures sont combinés.
Ces règles s'appliquent également lorsque les marges sont égales à 0. Ainsi, la marge d'un descendant finit toujours en dehors de l'élément parent (selon la deuxième règle vue ci-avant) quelle que soit la marge de l'élément parent (nulle ou non).
Lorsqu'on manipule des marges négatives, la taille de la marge fusionnée est la somme de la marge positive la plus grande et de la marge négative la plus petite (celle dont la valeur est plus éloignée de 0).
Les marges des éléments flottants et positionnés de façon absolue ne sont jamais fusionnées.
Dans une disposition en grille (display : grid), les marges verticales adjacentes des éléments de la grille ne s’effondrent jamais. Ces marges sont contenues par les contours invisibles de la grille.

Mais l’effondrement de marge est-ce une erreur de conception de CSS ?

Après avoir vu ce qu'est le phénomène d'effondrement des marges en CSS, examinons si cela constitue en soi une erreur de conception de la part de CSS.

L’effondrement des marges peut dérouter, mais il est en réalité parfaitement cohérent; et comprenez-le bien, ce n'est pas une erreur de la part de Css.

Pour comprendre cela, considérez une page classique composée de plusieurs paragraphes (voir Figure 5). L’espace au-dessus du premier paragraphe est égal à la marge supérieure. Sans l’effondrement des marges, l’espace entre tous les paragraphes subséquents correspondrait à la somme de leurs marges adjacentes. Il serait alors le double de celui du haut de la page. Grâce à l’effondrement des marges, les marges du haut et du bas de chaque paragraphe fusionnent et produisent un espacement égal partout.

Figure 5 : les marges s’effondrent afin que l’espace reste partout le même entre les éléments.