No Outer margin

No Outer margin

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

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

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


function Card({ children }) {
return (
// WARNING: Don't do this! It is an outer `margin`!

)
}

function EmployeeCard({ name, occupation }) {
return (

{/**
* This is fine! We can use internal margins for layout,
* but there are better ways we'll learn later!
*/}

{name}

{occupation}

)
}


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

✍️ @React_lib