إضافة مساحة داخل العناصر وحولها.

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

يمنح الفيديو زرًا هامشًا علويًا 24 بكسل.

قبل أن تبدؤوا

• افتحوا الصفحة في DXPR Builder؛ وتُظهر الإشارة إلى عنصر شريط تحكمه مع المزيد. جديدون على المنشئ؟ انظروا صفحتكم الأولى.
• حفظ في مربع الحوار يُبقي التغيير في المحرّر. وحفظ في شريط أدوات المنشئ فوق محتواكم يخزّن الصفحة ويعرض «Saved field».
• استخدموا نموذج الصندوق لإصلاح فجوة واحدة في صفحة واحدة.
• استخدموا قالبكم أو فئة للتباعد المتكرر، مثل الفجوة بين جميع الأقسام.
• التزموا بمقياس. تبدو الصفحات هادئة عندما تأتي كل فجوة من بضعة أحجام:

وصفة: فسحة حول زر

1. حوموا فوق الزر، وانقروا المزيد ثم الإعدادات.
2. افتحوا لوحة النمط وانقروا الجانب العلوي من الهامش، الحلقة الخارجية لنموذج الصندوق. وتبدأ الأقفال مفتوحة، فيتغير هذا الجانب فقط.
3. تحققوا من أن زر الوحدة يعرض PX. اكتبوا 24 في حقل القيمة واضغطوا Enter. فيقرأ الجانب الآن 24px ويتحرك الزر لأسفل.
4. انقروا حفظ في مربع الحوار، ثم حفظ في شريط الأدوات.

على الزر يذهب الهامش على الزر نفسه، فتبدأ المساحة عند حافته تمامًا.

وصفة: قسم أطول

يحصل القسم الجديد على حشو علوي وسفلي من فئة حجم الحشو العمودي 5 (py-5)، التي تتغلب على نموذج الصندوق. أزيلوا تلك الفئة أولًا. تحققوا من أن عنوان مربع الحوار يقرأ القسم لا الصف أو العمود.

1. حوموا فوق القسم، وانقروا المزيد ثم الإعدادات.
2. في اللوحة العامة، جدوا فئات HTML وانقروا × على رقاقة حجم الحشو العمودي 5 (py-5). فيفقد القسم بعض المساحة أعلى وأسفل. وإذا لم توجد رقاقة كهذه، تخطّوا هذه الخطوة.
3. افتحوا لوحة النمط. انقروا الجانب العلوي من الحشوة، واكتبوا 96 واضغطوا Enter.
4. افعلوا الشيء نفسه للجانب السفلي من الحشوة. فيقرأ الجانبان الآن 96px ويزداد القسم طولًا.
5. انقروا حفظ في مربع الحوار، ثم حفظ في شريط الأدوات.

ما ترونه

يعرض كل جانب تضبطونه قيمته في نموذج الصندوق، مثل 24px. ويستقر الزر أسفل بـ24 بكسل، وللقسم فسحة 96 بكسل فوق محتواه وتحته.

كيف يعمل نموذج الصندوق

+----------------- Margin ------------------+
||  +-------------- Border ---------------+  |
||  |  +----------- Padding ------------+ |  |
||  |  |                                | |  |
||  |  |         width × height         | |  |
||  |  |                                | |  |
||  |  +--------------------------------+ |  |
||  +-------------------------------------+  |
+-------------------------------------------+

• لكل حلقة أربعة جوانب. يعرض الجانب قيمته، مثل 24px، أو «-» عندما لا يكون مضبوطًا.
• انقروا جانبًا لفتح منتقٍ صغير مع منزلق وحقل قيمة وزر وحدة. والوحدة PX أو %؛ ويأخذ الحد px فقط.
• اكتبوا قيمة واضغطوا Enter، أو اسحبوا المنزلق. ويغيّر سهما الأعلى والأسفل القيمة بمقدار 1. ويغلق Escape المنتقي.
• لإلغاء ضبط جانب، أفرغوا حقل القيمة واضغطوا Enter. فيعرض الجانب «-» ويقرر قالبكم مجددًا.

يمتد الهامش من -200 إلى 200، والحشو من 0 إلى 200، والحد من 0 إلى 50. ويمتد العرض والارتفاع من 0 إلى 2000. ويسحب الهامش السالب العنصر نحو جاره. والقيمة المكتوبة خارج النطاق تُقطع إلى أقرب حد.

الأقفال

لكل حلقة قفل بجانب اسمها: الهامش والحد والحشوة. وعندما يكون القفل مغلقًا، تنتقل القيمة التي تضبطونها على جانب إلى الجوانب الأربعة. وعندما يكون مفتوحًا، يحتفظ كل جانب بقيمته. ولا يغيّر إغلاق القفل القيم الموجودة لديكم؛ بل تُنسخ فقط القيمة التالية التي تضبطونها.

النسبة المئوية والحجم وعرض الشاشة

القيمة بالنسبة المئوية حصة من عرض أصل العنصر، للأعلى والأسفل أيضًا. لذا فالحشو العلوي 10% أطول في عمود عريض منه في عمود ضيق.

يحمل وسط نموذج الصندوق العرض × الارتفاع. والعناصر التي تحجّم نفسها، مثل الصورة والخريطة، تتجاهل المربعين.

لا قيم لنموذج الصندوق لكل حجم شاشة. ولمزيد من الحشو على الشاشات الكبيرة منه على الهواتف، استخدموا فئات Bootstrap بدلًا من ذلك. فمثلًا يمنح py-3 py-lg-5 16 بكسل على الشاشات الأصغر و48 بكسل بدءًا من عرض 992 بكسل. انظروا معرّف HTML والفئات لمعرفة كيفية كتابتها.

كيف تلتقي قيمكم بتباعد القالب

• الأقسام الجديدة تجلب حشوًا. القسم الذي تضيفونه في المحرّر يحصل على فئة حجم الحشو العمودي 5 (py-5): 3rem، حوالي 48 بكسل، أعلى وأسفل. والفئة موسومة !important، فتتغلب على الحشوة العلوية والسفلية الخاصة بكم. ويبقى الحشو الأيمن والأيسر عاملين.
• فئات التباعد تفوز. أي فئة تباعد Bootstrap تحت فئات HTML، مثل حجم الهامش العلوي 3 (mt-3)، تتغلب على قيمتكم على الجانب نفسه.
• الأعمدة تحافظ على فجوة. يمنح Bootstrap كل عمود حشو 12 بكسل يمينًا ويسارًا. والحشوة اليمنى أو اليسرى على عمود تستبدلها، فلا يعود المحتوى مصطفًا مع العمود التالي.
• الفقرات تحافظ على تباعدها. يضع قالبكم مساحة تحت كل فقرة وعنوان. ولا يغيّر نموذج الصندوق تلك المساحة، لأنه يعمل على العنصر ككل.
• هوامش الجيران تتداخل عادة. عندما يستقر عنصر فوق آخر، يتشارك الهامش السفلي للأول والهامش العلوي للثاني الفجوة. والأكبر يفوز؛ ولا يجتمعان.

إذا لم يظهر لكم

• الحشو العلوي أو السفلي على قسم لا يفعل شيئًا. فئة حجم الحشو العمودي 5 (py-5) تفوز. أزيلوا رقاقتها تحت فئات HTML.
• قيمة هامش أو حشو لا تفعل شيئًا. فئة تباعد Bootstrap على الجانب نفسه تفوز. أزيلوا رقاقتها، أو استخدموا الفئة فقط.
• الحشو لا يظهر. العنصر بلا خلفية أو حد، فالمساحة غير مرئية. اختاروا لون خلفية أثناء ضبطه.
• قفزت القيمة إلى 200. يتوقف الحشو والهامش عند 200، والحد عند 50. استخدموا قيمة أصغر، أو نسبة مئوية.
• الصفحة مزدحمة على الهواتف. تنطبق قيمة البكسل نفسها على كل شاشة. استخدموا قيمًا أصغر أو نسبة مئوية أو فئات متجاوبة.
• الفجوتان لم تجتمعا. الهوامش المتراصة تتداخل والأكبر يفوز. ضعوا الفجوة كاملة على أحد العنصرين.
• الأعمدة لم تعد مصطفة. الحشوة الجانبية على عمود استبدلت فجوة الشبكة. أفرغوا تلك الجوانب مجددًا.

ما الخطوة التالية؟

• الطباعة: حجّموا النص داخل صندوقكم المتباعد ولوّنوه.