المسافات

بودكاست 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 السمات بترتيب معيّن: الأعلى ولليمين والأسفل واليسار. يمكنك تذكُّر هذه المشاكل: حل المشاكل.

ويمكن أيضًا استخدام اختصار 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 والشبكة من أجله.

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

مساحة متروكة

فبدلاً من توفير مساحة في خارج الصندوق، مثلما يفعل 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. عندما يتم تحديثها، إما محليًا داخل عنصر ما أو عالميًا، ستمرر القيم عبر الشلال وستنعكس القيم المحدثة.

التحقق من فهمك

اختبر معلوماتك حول التباعد