Padding vs margin
Also called margin vs padding or CSS box model
Padding is the space inside an element’s border, around its content, while margin is the space outside the border that pushes other elements away.
const SETTINGS = [
{ title: 'Mentions', text: 'When someone tags you in a comment.' },
{ title: 'Deploys', text: 'When a project you own goes live.' },
{ title: 'Invites', text: 'When you are added to a team.' }
];
export function NotificationSettings() {
return (
<section className='max-w-md'>
{/* Margin: space outside the heading, pushing it away from what's above. */}
<h2 className='mt-12 text-xl font-semibold'>Notifications</h2>
{/* gap spaces the cards evenly, so none of them need margins. */}
<div className='mt-4 flex flex-col gap-4'>
{SETTINGS.map((setting) => (
// Padding: room inside the border, filled with the card's background.
<div key={setting.title} className='rounded-xl border bg-muted p-6'>
<h3 className='font-medium'>{setting.title}</h3>
<p className='text-sm text-muted-foreground'>{setting.text}</p>
</div>
))}
</div>
{/* More padding makes the button itself bigger. */}
<button
type='button'
className='mt-6 rounded-lg bg-primary px-5 py-3 text-sm font-medium text-primary-foreground'
>
Save changes
</button>
</section>
);
}Give the buttons 12px vertical and 20px horizontal padding so the labels have room inside, and space the cards in the list 16px apart with gap on the flex container instead of margins. Keep 24px of padding inside each card and 48px of margin above each section heading.
Paste into Layerwise or any AI coding tool.
Padding vs margin explained
Every element is a set of nested boxes, called the box model: the content in the middle, then padding, then the border, then margin. Padding adds room inside the element and takes on its background color, so a button with more padding looks bigger. Margin adds empty, transparent space outside the border, so it moves neighbors away.
A quick rule: if the space should feel like part of the element (a roomy button, a card with space around its text), use padding. If it is distance between separate things (between cards, below a heading), use margin, or better, gap on the parent flex or grid container, which spaces every child evenly with no margins at all.
Two details trip people up. In normal page flow, the vertical margins of stacked blocks overlap: a 24px bottom margin above a 16px top margin leaves 24px in total, the larger of the two. And by default an element’s padding is added to its width; box-sizing: border-box, which Tailwind turns on everywhere, counts padding inside the width instead.
Related terms
All termsFlexbox
A CSS layout mode that lines items up in a row or a column and controls how they share space, align, and wrap.
CSS Grid
A CSS layout system that places items on rows and columns at once, so content lines up in both directions.
Container
A wrapper that caps content at a maximum width and centers it, so lines stay readable on wide screens and keep padding on small ones.
Card
A bordered, rounded container that groups one item’s image, title, details, and actions so it can sit in a list or grid with others.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.