React

No Outer margin

В статье обсуждается проблема использования внешних отступов (outer margin) в веб-дизайне. Автор объясняет, почему лучше избегать их в пользу внутренних отступов (padding) для компонентов. Основной аргумент: внутренние отступы делают дизайн более предсказуемым и гибким, упрощая настройку элементов и их позиционирование.
Статья также содержит примеры и рекомендации для практического применения в современной веб-разработке.

Что такое «внешние» отступы и padding?

Здесь термин «внешние» относится к отступам, которые выходят за границы border-box пользовательского интерфейса. В основном это касается случаев, когда margin применяется к самому внешнему элементу компонента.

function Card({ children }) {
  return (
    // WARNING: Don't do this! It is an outer `margin`!
    <div style={{ marginBottom: '1rem' }}>{children}</div>
  )
}

function EmployeeCard({ name, occupation }) {
  return (
    <Card>
      {/**
       * This is fine! We can use internal margins for layout,
       * but there are better ways we'll learn later!
       */}
      <div style={{ marginBottom: '1rem' }}>{name}</div>
      <div>{occupation}</div>
    </Card>
  )
}

https://kyleshevlin.com/no-outer-margin/

✍️ @React_lib

www.tg-me.com/cn/telegram/com.React_lib/624

1.4K viewsDec 12, 2024 at 08:56

No Outer margin

В статье обсуждается проблема использования внешних отступов (outer margin) в веб-дизайне. Автор объясняет, почему лучше избегать их в пользу внутренних отступов (padding) для компонентов. Основной аргумент: внутренние отступы делают дизайн более предсказуемым и гибким, упрощая настройку элементов и их позиционирование.
Статья также содержит примеры и рекомендации для практического применения в современной веб-разработке.

Что такое «внешние» отступы и padding?

Здесь термин «внешние» относится к отступам, которые выходят за границы border-box пользовательского интерфейса. В основном это касается случаев, когда margin применяется к самому внешнему элементу компонента.

function Card({ children }) {
  return (
    // WARNING: Don't do this! It is an outer `margin`!
    <div style={{ marginBottom: '1rem' }}>{children}</div>
  )
}

function EmployeeCard({ name, occupation }) {
  return (
    <Card>
      {/**
       * This is fine! We can use internal margins for layout,
       * but there are better ways we'll learn later!
       */}
      <div style={{ marginBottom: '1rem' }}>{name}</div>
      <div>{occupation}</div>
    </Card>
  )
}

BY React