بودكاست 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
، لن يصغر هامشه بعد ذلك وسيتم التعامل معه كأي مربع يتضمن محتوى.
التحقّق من استيعابك
اختبار معلوماتك عن انهيار الهوامش
في حالة وجود عنصرين مكدسين فوق بعضهما البعض وبهما 20 بكسل من الهامش العلوي و30 بكسل من الهامش السفلي، ما مقدار المساحة بينهما؟
منع تصغير الهوامش
إذا ضبطت عنصرًا في موضعه الكامل،
باستخدام 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 بالكامل. عندما يتم تحديثها، سواء داخل عنصر أو بشكل عام، ستنتقل القيم إلى الشلال وستنعكس القيم المحدثة.
التحقّق من استيعابك
اختبر معلوماتك عن المسافات
من الآمن استخدام HTML لوضع المسافات في الحالات التالية:
لإنشاء مساحة داخل مربع، استخدِم...
لإنشاء مساحة خارج مربع، استخدِم...
لإنشاء مسافة بين المربعات، استخدِم...