فاصله: margin و padding

دو خاصیت فاصله، که اغلب قاطی می‌شوند:

• padding: فضای داخلیِ عنصر (بین محتوا و border)
• margin: فضای بیرونیِ عنصر (با عناصر دیگر)

padding: 20px;          /* همه طرف */
padding: 10px 20px;     /* بالا/پایین ۱۰، چپ/راست ۲۰ */
padding: 10px 20px 30px 40px;  /* بالا، راست، پایین، چپ */

margin: 16px;
margin: 0 auto;         /* وسط‌چین افقی */
margin-top: 24px;

margin منفی و ادغام

margin می‌تواند منفی باشد. marginهای عمودیِ مجاور ادغام می‌شوند (بزرگ‌تر برنده، نه مجموع) — رفتاری که گاهی غافلگیر می‌کند.

وسط‌چین کردن افقی

.container { max-width: 800px; margin: 0 auto; }

در درس Box Model، رابطهٔ این دو با کل اندازه را دقیق می‌بینیم.