الصناديق والمسافات · البرمجة مع مارتن

اكتشف أكبر سر في CSS: كل شيء على الصفحة صندوق. وتعلّم تحريكها.

شاهد معي: كل شيء صندوق

إليك أكبر سر في تصميم الويب: كل شيء على الصفحة صندوق مستطيل. عنوان، فقرة، صورة، قائمة – كلها. عندما تتعلّم رؤية ذلك، كل CSS يصبح واضحاً.

كل صندوق له ثلاثة أنواع من المساحة حوله:

        margin (outer space)
      ┌─────────────────────────┐
      │  border (frame)         │
      │  ┌───────────────────┐  │
      │  │ padding (cushion) │  │
      │  │  ┌─────────────┐  │  │
      │  │  │   CONTENT   │  │  │
      │  │  └─────────────┘  │  │
      │  └───────────────────┘  │
      └─────────────────────────┘

padding – الوسادة: مسافة بين المحتوى والإطار (داخل الصندوق)
border – إطار الصندوق
margin – مسافة بين الصندوق وجيرانه (خارج الصندوق)

.card {
  padding: 16px;        /* cushion on all sides */
  border: 2px solid gray;
  margin: 20px 0;       /* 20px top and bottom, 0 on the sides */
  border-radius: 12px;
}

شاهد معي: صفحة كما يبنيها المحترفون

رأيت هذا على مواقع حقيقية – المحتوى لا يمتد على الشاشة العريضة كلها، بل يبقى في عمود مريح في الوسط. ثلاثة أسطر CSS تفعل ذلك:

main {
  max-width: 700px;   /* content will never be wider than 700px */
  margin: 0 auto;     /* auto on the sides = center it */
  padding: 0 16px;     /* on mobile, text won't be glued to the edge */
}

margin: 0 auto صيغة سحرية: صفر من الأعلى والأسفل، “متساوٍ تلقائياً” على الجوانب – أي في الوسط. تقريباً كل موقع في العالم يستخدم هذه القاعدة.

ولنروّض الصور أيضاً، حتى لا تفيض من الصفحة:

img {
  max-width: 100%;      /* never wider than the column */
  height: auto;         /* height adjusts automatically, so the photo doesn't squish */
  border-radius: 12px;  /* rounded corners suit every photo */
}

دورك الآن 💪

هذه المهمة نفسها لكل مشروع – زيٌ عالمي لأي موقع:

وسّط محتواك: قاعدة max-width + margin: 0 auto على main.
روّض صورك بقاعدة img من المثال.
حسّن شارتك من الدرس السابق: أضف margin ليتنفس.
دع الصفحة تتنفس: أضف body { line-height: 1.6; } – أسطر النص تتباعد بشكل جميل.

الحل الكامل (يعمل لكل مشروع)

أضف هذا إلى style.css:

body {
  line-height: 1.6;
}

main {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

ولشارتك (قد تُسمى .news، .favorite، .tip، أو .win)، أضف هذا السطر:

  margin: 20px 0;

💡

جرّب جعل الصناديق مرئية! أضف هذه القاعدة إلى CSS للحظة: * { border: 1px solid red; } – النجمة تعني “كل شيء مطلقاً”. فجأة سترى كل صندوق على الصفحة. ثم احذفها، لكن تذكّر ذلك المنظر: هكذا يرى المتصفح صفحتك.

✅

تحقق من نفسك: محتواك في عمود مريح في الوسط، الصور لها زوايا مستديرة ولا تفيض، النص سهل القراءة. صغّر نافذة المتصفح – المحتوى يتكيّف. موقعك فجأة يبدو أفضل بدرجة.

ما ستخرج به من هذا الدرس

كل شيء على الصفحة صندوق له padding (داخل)، border (إطار)، وmargin (خارج).
max-width + margin: 0 auto = عمود محتوى في الوسط، مثل المواقع الحقيقية.
img { max-width: 100%; } – الصور لا تفيض أبداً.