المسافات

بودكاست CSS - 013: المسافات

لنفترض أن لديك مجموعة من ثلاثة مربعات، مكدسة فوق بعضها البعض وتريد مسافة بينها. كم عدد الطرق التي يمكنك التفكير بها لإجراء ذلك في CSS؟

قد توفّر لك السمة margin ما تريده، ولكنّها قد تضيف أيضًا مسافات إضافية لا تريدها. على سبيل المثال، كيف تستهدف المسافة بين كل عنصر من هذه العناصر؟ قد يكون شيء مثل gap أكثر ملاءمة في هذه الحالة. هناك العديد من الطرق لضبط التباعد داخل واجهة المستخدم، لكل منها نقاط قوتها وتنبيهاتها الخاصة.

تباعد HTML

يوفر HTML نفسه بعض الطرق لتباعد العناصر. يتيح لك العنصران <br> و<hr> تباعد العناصر في اتجاه الكتلة، والذي إذا كنت تتحدث لغة لاتينية، يكون من الأعلى إلى الأسفل.

إذا استخدمت عنصر <br>، سيؤدي ذلك إلى إنشاء فاصل أسطر، تمامًا كما لو كنت تضغط على مفتاح enter في معالج كلمات.

تنشئ <hr> خطًا أفقيًا على جانبَي المسافة، ويُعرَف باسم margin.

إلى جانب استخدام عناصر HTML، يمكن كيانات HTML إنشاء مساحة. كيان HTML هو سلسلة محجوزة من الأحرف يتم استبدالها بكيانات الأحرف في المتصفّح. على سبيل المثال، إذا أردت كتابة © في ملف HTML، سيتم تحويله إلى حرف ©. يتم تحويل الكيان   إلى حرف مسافة غير منفصل، وتوفير مسافة مضمّنة. ومع ذلك، كن حذرًا، لأن الجانب غير الانتقائي لهذه الشخصية يجمع العنصرين معًا، مما قد يؤدي إلى سلوك غريب.

الهامش

إذا أردت إضافة مسافة إلى الجزء الخارجي من عنصر ما، يمكنك استخدام السمة margin. الهامش يشبه إضافة وسادة حول عنصرك. إنّ السمة margin هي اختصار للمصطلحات margin-top وmargin-right وmargin-bottom وmargin-left.

يطبّق الاختصار margin الخصائص بترتيب معيّن: أعلى ويمين وأسفل ويسار. يمكنك تذكر هذه المشكلات: TRouBLe.

يمكن استخدام اختصار margin أيضًا مع قيمة واحدة أو قيمتين أو ثلاث قيم. تتيح لك إضافة قيمة رابعة تحديد كل جانب على حدة. ويتم تطبيق هذه الطرق على النحو التالي:

• سيتم تطبيق قيمة واحدة على جميع الجوانب. (margin: 20px).
• قيمتان: سيتم تطبيق القيمة الأولى على الجانبين العلوي والسفلي، وسيتم تطبيق القيمة الثانية على الجانبين الأيسر والأيمن. (margin: 20px 40px)
• ثلاث قيم: القيمة الأولى هي top، والقيمة الثانية هي left و right، والقيمة الثالثة هي bottom. (margin: 20px 40px 30px).

يمكن تحديد الهامش باستخدام طول أو نسبة مئوية أو قيمة تلقائية، مثل 1em أو 20%. إذا استخدمت نسبة مئوية، فسيتم احتساب القيمة بناءً على عرض الكتلة التي تحتوي على العنصر.

وهذا يعني أنّه إذا كانت الكتلة التي تتضمن العنصر تساوي عرض 250px وتبلغ قيمة margin للعنصر 20%، سيحتوي كل جانب من العنصر على هامش محسوب بقيمة 50px.

يمكنك أيضًا استخدام القيمة auto للهامش. بالنسبة إلى عناصر مستوى الكتلة ذات الحجم المشروط، سيشغل هامش auto مساحة متاحة في الاتجاه الذي يتم تطبيقه عليه. وخير مثال على ذلك هو هذا النموذج من وحدة flexbox، حيث يتم ابتعاد العناصر عن بعضها البعض.

من الأمثلة الجيدة الأخرى على هامش auto برنامج تضمين في الوسط أفقيًا يتضمّن حدًا أقصى للعرض. غالبًا ما يتم استخدام هذا النوع من البرامج لإنشاء عمود مركزي متسق على موقع ويب.

.wrapper {
    max-width: 400px;
    margin: 0 auto;
}

في هذه الحالة، تتم إزالة الهامش من أعلى وأسفل (القالب) ويشارك auto المسافة بين الجانبين الأيسر والأيمن (المضمَّن).

هامش سلبي

يمكن أيضًا استخدام القيم السالبة للهامش. بدلاً من إضافة مسافة بين العناصر التابعة المتجاورة، فسيؤدي ذلك إلى تقليل المسافة بينها. يمكن أن يؤدي ذلك إلى تداخل العناصر، إذا أعلنت أن قيمة سالبة أكبر من المساحة المتاحة.

تصغير الهامش

يعد انهيار الهامش مفهومًا معقدًا، ولكنه شيء ستواجهه بشكل شائع للغاية عند إنشاء الواجهات. لنفترض أن لديك عنصرين: عنوان وفقرة بهما هامش عمودي عليهما:

<article>
  <h1>My heading with teal margin</h1>
  <p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>

h1 {
    margin-bottom: 2rem;
}

p {
    margin-top: 3rem;
}

للوهلة الأولى، نعتذر عن الاعتقاد بأن الفقرة سيتم تباعدها بـ 5em عن العنوان، لأن 2rem و3rem يتم حسابهما معًا لتصبح 5rem. بسبب تصغير الهامش العمودي، تكون المساحة في الواقع 3rem.

يعمل تصغير الهوامش من خلال تحديد القيمة الأكبر لعنصرين متجاورين مع تعيين هامش رأسي على الجوانب المتجاورة. يلتقي الجزء السفلي من h1 بأعلى p، لذلك يتم اختيار أكبر قيمة للهامش السفلي لـ h1 والهامش العلوي لـ p. وإذا كانت قيمة h1 تتضمّن 3.5rem من الهامش السفلي، ستكون المسافة بينهما هي 3.5rem لأنّ ذلك أكبر من 3rem. يمكن تصغير هوامش الكتلة فقط، وليس الهوامش المضمّنة (الأفقية).

يساعد تصغير الهوامش أيضًا مع العناصر الفارغة. إذا كان لديك فقرة تحتوي على هامشَين أعلى وأسفل 20px، سيتم إنشاء 20px من المساحة فقط وليس 40px. إذا تمت إضافة أي شيء إلى داخل هذا العنصر، بما في ذلك padding، لن يصغر هامشه بعد ذلك وسيتم التعامل معه كأي مربع يتضمن محتوى.

التحقّق من استيعابك

اختبار معلوماتك عن انهيار الهوامش

منع تصغير الهوامش

إذا ضبطت عنصرًا في موضعه الكامل، باستخدام position: absolute، لن يصغَّر الهامش بعد الآن. ولن يصغر الهامش أيضًا في حال استخدام السمة float.

إذا كان لديك عنصر بدون هامش بين عنصرين مع هامش كتلة، فلن ينهار الهامش أيضًا، لأن العنصرين اللذين لديهما هامش كتلة لم يعدا شقيقين متجاورة: إنهما مجرد شقيقة.

في درس التنسيق، تعلمت أن حاويات flexbox والشبكة مشابهة جدًا لحاويات الكتل، لكن تتعامل مع العناصر الفرعية بشكل مختلف تمامًا. هذه هي الحالة مع تصغير الهامش أيضًا.

إذا أخذنا المثال الأصلي من الدرس وطبقنا flexbox مع اتجاه العمود، يتم دمج الهوامش بدلاً من تصغيرها. يمكن أن يوفر ذلك إمكانية التنبؤ بأعمال التخطيط، وهو ما تم تصميم حاويات Flexbox والشبكة من أجله.

قد يكون من الصعب فهم انهيار الهوامش والهوامش، ولكن فهم آلية عملها بالتفصيل أمرٌ مفيد للغاية، لذا ننصح بشدة باستخدام هذا الشرح التفصيلي.

مساحة متروكة

بدلاً من توفير مساحة على الجزء الخارجي من العلبة، كما هو الحال مع margin، تنشئ السمة padding مساحة على داخل المربع بدلاً من ذلك، مثل مواد العزل.

بناءً على نموذج المربّع الذي تستخدمه، والذي تم تناوله في درس نموذج المربّع، يمكن أن يؤثر padding أيضًا في الأبعاد العامة للعنصر أيضًا.

السمة padding هي اختصار للمصطلحات padding-top وpadding-right وpadding-bottom وpadding-left. تمامًا مثل margin، تتميّز padding بسمات منطقية أيضًا: padding-block-start وpadding-inline-end وpadding-block-end وpadding-inline-start.

المكانة في السوق

ونتناول أيضًا في وحدة التنسيق في حال ضبط قيمة لـ position غير static، يمكنك إضافة مسافة للعناصر باستخدام الخصائص top وright وbottom وleft. هناك بعض الاختلافات في سلوك قيم الاتجاهات التالية:

• سيحافظ العنصر الذي يتضمّن position: relative على مكانه في تدفق المستند، حتى عند ضبط هذه القيم. حيث ستكون نسبية مع موضع العنصر أيضًا.
• وسيبني العنصر الذي يتضمّن position: absolute قيم الاتجاهات من موضع العنصر الرئيسي النسبي.
• وسيبني العنصر الذي يتضمّن position: fixed قيم الاتجاهات على إطار العرض.
• ولن يطبّق العنصر الذي يتضمّن position: sticky قيم الاتجاهات إلا عندما يكون في حالة الإرساء أو التوقّف عن العمل.

في وحدة الخصائص المنطقية، ستتعرف على السمتين inset-block وinset-inline اللتين تتيحان لك تعيين قيم الاتجاهات التي تشرف على وضع الكتابة.

كلتا الخاصتَين هما اختصاران يجمعان بين قيمتَي start وend، وبالتالي يمكنك قبول ضبط قيمة واحدة لكل من start وend أو قيمتَين فرديتَين.

الشبكة وتقنية flexbox

أخيرًا، يمكنك استخدام السمة gap في كل من الشبكة وflexbox لإنشاء مسافة بين العناصر الفرعية. الخاصية gap هي اختصار لـ row-gap وcolumn-gap، وتقبل قيمة واحدة أو قيمتين، ويمكن أن تكون أطوال أو نسبًا مئوية. يمكنك أيضًا استخدام كلمات رئيسية مثل unset وinitial وinherit. إذا حددت قيمة واحدة فقط، سيتم تطبيق نفس gap على كل من الصفوف والأعمدة، ولكن إذا حددت كلتا القيمتين، فإن القيمة الأولى هي row-gap والقيمة الثانية هي column-gap.

باستخدام كل من flexbox والشبكة، يمكنك أيضًا إنشاء مساحة باستخدام إمكانات التوزيع والمحاذاة، وهي إمكانات نتناولها في وحدة الشبكة وflexbox.

إنشاء مسافات متناسقة

من الجيد حقًا اختيار استراتيجية والالتزام بها لمساعدتك في إنشاء واجهة مستخدم متسقة تتميز بتدفق وتناغم جيدَين. وهناك طريقة جيدة لتحقيق ذلك وهي استخدام مقاييس متسقة للتباعد بين العناصر.

على سبيل المثال، يمكنك الالتزام باستخدام 20px كمقياس متسق لجميع الفجوات بين العناصر، المعروفة باسم هوامش التوثيق، بحيث تبدو جميع التخطيطات متسقة. يمكنك أيضًا اختيار استخدام 1em كتباعد رأسي بين محتوى التدفق، ما سيحقّق تباعدًا ثابتًا استنادًا إلى font-size للعنصر. ومهما كان اختيارك، ينبغي عليك حفظ هذه القيم كمتغيرات (أو خصائص CSS مخصصة) لعمل رمز مميز لتلك القيم وتسهيل الاتساق.

:root {
  --gutter: 20px;
  --spacing: 1em;
}

h1 {
  margin-left: var(--gutter);
  margin-top: var(--spacing);
}

يتيح لك استخدام خصائص مخصصة مثل هذه تعريفها مرة واحدة، ثم استخدامها في CSS بالكامل. عندما يتم تحديثها، سواء داخل عنصر أو بشكل عام، ستنتقل القيم إلى الشلال وستنعكس القيم المحدثة.

التحقّق من استيعابك

اختبر معلوماتك عن المسافات