* **Content Type:** This is an article or blog post. * **Visible Text, Headlines, Prices, or Key Information:** * **Author:** Kyle Shevlin * **Role:** Software Engineer * **Date:** February 26, 2024 * **Article Title:** No Outer margin * **Main Headings:** * What are "outer" margins and paddings? * What's the big deal? Why is this a problem/anti-pattern? * An abstract example * A concrete example * The solution * Summary * Other articles * Liked the post? * Want to read more? * Related Post: * Newer Post: * Older Post: * Tags * **Key Concepts/Definitions:** * "Outer" margins are defined as "margins that extend beyond the border-box of the UI." * The problem with outer margins/paddings "breaks encapsulation" and leads to "compensations" (workarounds). * "External spacing should never be the responsibility of a component. Components should only ever be concerned with internal spacing." * **Code Examples (JavaScript/JSX snippets):** * `function Card({ children }) { return (<div style={{ marginBottom: '1rem' }}>{children}</div>)}` (Marked as "WARNING: Don't do this! It is an outer 'margin'!") * `function EmployeeCard({ name, occupation }) { return (<Card> <div style={{ marginBottom: '1rem' }}>{name}</div> <div>{occupation}</div> </Card>)}` (Commented: "This is fine! We can use internal margins for layout, * but there are better ways we'll learn later!") * `function Card({ children }) { return (<div style={{ paddingBottom: '1rem' }}>{children}</div>)}` (Marked as "WARNING! Don't do this! It is outer 'padding'!") * `function BorderCard({ children }) { return (<div style={{ border: '1px solid tomato', backgroundColor: 'gray', padding: '1rem' }}>{children}</div>)}` (Commented: "This padding is ok because we have styles that extend to the // border-box of our component, thus defining a boundary for // this UI!") * `function Item() { return <div className="rounded bg-accent p-8" />}` * `function Item() { return <div className="mb-4 rounded bg-accent p-8" />}` (Illustrates adding `mb-4` class for margin-bottom) * `function Item({ marginBottom = true }) { const mb = marginBottom ? 'mb-4' : ''; return <div className={`rounded bg-accent p-8 ${mb}`} />}` (Illustrates a `marginBottom` prop, described as "Yet Another Prop syndrome") * `function H2({ children }) { return <h2 className="mb-4 text-xl font-bold">{children}</h2>}` * **Summary Points:** * No margin on the outermost element * No padding on the outermost element unless it has a border or background-color to visually define the border-box boundary of the UI * Use parent elements or components to do layout instead * **References/Links:** * "Margin considered harmful" by Max Stoiber * "Prefer Gaps To Margins" (Related Post) * "Agathist Q&A" (Newer Post) * "Type TODO" (Older Post) * Links to Kyle Shevlin's social media (GitHub, RSS, Bluesky) * Links to contributors' GitHub profiles for the blog. * **Interactive Elements:** * "edit" link (pencil icon) * Dark/Light mode toggle (sun/moon icon) * "Toggle footnote" buttons * "beard" icon with "+0" for liking the post. * Newsletter signup form (First Name, Email Address, Sign Up button) * "View the course" button for Data Structures and Algorithms course. * **Main Topic or Purpose of the Page:** * The page is an educational article for software developers, specifically frontend developers, discussing the anti-pattern of using "outer margins" and "outer paddings" on UI components. It explains why this practice is problematic (breaks encapsulation, leads to "compensations") and proposes a solution: managing external spacing and layout using parent elements or components, often with tools like Flexbox, Grid, Chakra UI, or Tailwind's gap utilities. * **Visible Details to Help Remember the Page:** * The author, Kyle Shevlin, is a software engineer. * The article focuses on best practices for component spacing in UI development. * It uses code examples (likely React/JSX) to illustrate both the problem and the solution. * The "No Outer margin" title is a direct and memorable summary of the topic. * The "beard strokes" for liking the post is a unique and quirky detail. * The article advocates for using parent elements for layout rather than components managing their own external spacing. * Mentions "Yet Another Prop syndrome" as a negative outcome of the anti-pattern.