Member Avatar for xeption12

hello guys,

what is the difference between padding and margin in css? isnt the same thing?

  • 4 Contributors
  • 4 Replies
  • 127 Views
  • 4 Years Discussion Span
  • Latest Post Latest Post by hudonkotel

Dani AI

Generated

pointed to a box-model demo and gave a concise summary. Below are practical clarifications and modern tips that go beyond the basic diagram so the behavior is predictable in real pages. For a clear visual reference, see The CSS box model.

Backgrounds and painting: an element’s background covers its content and padding but not its margins. That makes padding the correct place for “inner breathing room” when you want a colored panel or larger clickable area. To avoid padding expanding an element’s declared size, use box-sizing: border-box. Example:

/* content-box (default): padding adds to total width */
.panel { width: 300px; padding: 20px; border: 1px solid #ccc; }

/* border-box: total width stays 300px */
.panel-fixed { box-sizing: border-box; width: 300px; padding: 20px; border: 1px solid #ccc; }

See box-sizing on MDN for details.

Layout gotchas: vertical margins of adjacent normal-flow block elements can collapse into one margin; this often surprises developers. Adding padding, a border, inline content, or setting overflow on the parent prevents collapse. Negative margins can overlap elements but change flow and should be used deliberately. For spacing between children in modern layouts prefer gap with flexbox/grid — it avoids margin-collapse pitfalls and is easier to maintain (see gap on MDN and Mastering margin collapsing).

Practical rules: use padding for internal spacing and larger hit areas; use margin for separation and centering (margin: 0 auto on fixed-width blocks); apply box-sizing: border-box globally to avoid surprises; prefer gap in flex/grid for consistent spacing. ’s older link is fine for basics, but MDN and the spec remain the current, authoritative references.

Recommended Answers

All 4 Replies

Member Avatar for ShawnCplus

To put it in extremely simple terms and in more detail than I could
Move the perspective slider all the way to the right to make it a bit more clear.

Member Avatar for xeption12

thanx alot dude :) i owe you :)

Member Avatar for MidiMagic

Margin is outside the border. Padding is inside the border.

Member Avatar for hudonkotel

Hello,
I find out to new link of padding & margin in css.This link is very helpful related to padding & margin in css of php.This link as under….

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.