وصف

يضبط مقدار الحشو من كل حافة للعنصر. الهامش هو المسافة من حدود العنصر الحالي إلى الحدود الداخلية للعنصر الأصلي (الشكل 1).

أرز. 1. مسافة بادئة من الحافة اليسرى للعنصر

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

تسمح لك خاصية الهامش بتعيين قيمة الهامش لجميع جوانب العنصر مرة واحدة أو تعريفه لجوانب محددة فقط.

بناء الجملة

الهامش: [القيمة | الفائدة | تلقائي] (1،4) | يرث

قيم

يمكنك استخدام قيمة واحدة أو اثنتين أو ثلاث أو أربع قيم، مفصولة بمسافة. يعتمد التأثير على عدد القيم وهو موضح في الجدول. 1.

يمكن تحديد مقدار المسافة البادئة بالبكسل (px) أو النسبة المئوية (٪) أو القيم المقبولة الأخرى. وحدات CSS. يمكن أن تكون القيمة رقمًا موجبًا أو سالبًا.

Auto يحدد أنه سيتم حساب حجم المسافة البادئة تلقائيًا بواسطة المتصفح. يرث يرث قيمة الوالد.

HTML5 CSS2.1 IE Cr Op Sa Fx

نتيجة هذا المثاليظهر في الشكل. 2.

أرز. 2. تطبيق خاصية الهامش

نموذج الكائن

document.getElementById("elementID").style.margin

المتصفحات

متصفح الانترنت 6. في وضع التوافق (وضع Quirk) لا يدعم محاذاة الكتلة إلى المركز باستخدام قواعد الهامش: 0 تلقائي . يوجد أيضًا خطأ في هذا المتصفح يتمثل في مضاعفة قيمة الحشو اليسرى أو اليمنى للعناصر العائمة المتداخلة داخل العناصر الأصلية. يتم مضاعفة الهامش المجاور لجانب الوالدين. عادةً ما يتم حل المشكلة عن طريق إضافة العرض: سطريًا إلى العنصر العائم.

إصدارات Internet Explorer حتى 7.0 لا تدعم القيمة الموروثة.

ملحوظة

بالنسبة لعناصر الكتلة الموجودة بجوار بعضها البعض عموديًا، يتم ملاحظة تأثير الانهيار عندما لا يتم تلخيص المسافات البادئة، ولكن يتم دمجها مع بعضها البعض. يعمل الانهيار نفسه على كتلتين أو أكثر (يمكن دمج إحداهما داخل كتلة أخرى) مع وجود مسافات بادئة في الأعلى أو الأسفل، بينما يتم دمج المسافات البادئة المجاورة في كتلة واحدة. بالنسبة للحشوة اليسرى واليمنى، لا يتم تطبيق الانهيار مطلقًا.

الانهيار لا يعمل:

• للعناصر التي تم ضبط خاصية الحشو عليها على الجانب المنهار.
• للعناصر التي لها حدود محددة على الجانب المنهار؛
• على العناصر مع تحديد المواقع المطلقة، أي. أولئك الذين تم تعيين موقفهم على المطلق ;
• على العناصر العائمة (التي يتم تعيين الخاصية float لها على اليسار أو اليمين)؛
• للعناصر المضمنة؛
• ل .

يعد Internet Explorer مشكلة تدمر حياة معظم مطوري الويب. يمكن قضاء أكثر من 60% من وقت التطوير في حل هذه المشكلات المحددة، وهو أمر ليس كذلك الاستخدام الفعالوقت. سأتحدث في هذه المقالة عن الأخطاء والتناقضات الأكثر شيوعًا في تحديد المواقع، بالإضافة إلى كيفية حل هذه المشكلات بسهولة.

1. تحديد المواقع في المركز.

واجه كل مطور ويب، عند تصميم موقع ويب، الحاجة إلى محاذاة عنصر في المركز. أبسط و طريقة شعبية- هذا لكتابة الهامش: تلقائي؛ . تتيح لك هذه الطريقة توسيط عنصر بغض النظر عن دقة الشاشة. ومع ذلك، لا تعمل هذه الطريقة في IE6.

خذ بعين الاعتبار الكود التالي:

#container ( الحد: صلب 1 بكسل #000؛ الخلفية: #777؛ العرض: 400 بكسل؛ الارتفاع: 160 بكسل؛ الهامش: 30 بكسل 0 0 30 بكسل؛ ) #element ( الخلفية: #95CFEF؛ الحدود: صلب 1 بكسل #36F؛ العرض: 300 بكسل؛ الارتفاع: 100 بكسل؛ الهامش: 30 بكسل تلقائي)

نتيجة متوقعة:

ومع ذلك، سيعرض لك Internet Explorer ما يلي:

يحدث هذا لأن IE6 لا يتعرف على مجموعة القيمة التلقائية خاصية الهامش. لحسن الحظ، هذا سهل الإصلاح.

دعونا إصلاحه.

أبسط و طريقة مجربةلتوسيط عنصر في IE6 يعني كتابة مركز محاذاة النص على العنصر الأصلي وتطبيق محاذاة النص: تركه لنفسه بحيث تتم محاذاة محتوياته بشكل صحيح.

#container (الحدود: 1 بكسل #000؛ الخلفية: #777؛ العرض: 400 بكسل؛ الارتفاع: 160 بكسل؛ الهامش: 30 بكسل 0 0 30 بكسل؛ محاذاة النص: مركز؛) #element( الخلفية: #95CFEF؛ الحدود: 1 بكسل #36F؛ العرض: 300 بكسل؛ الارتفاع: 100 بكسل؛ الهامش: 30 بكسل 0؛ محاذاة النص: يسار؛ }

2. تأثير الخطوة

يستخدم كل مطور تقريبًا القوائم لإنشاء التنقل. عادة، يتم إنشاء عنصر الحاوية، وتكون الروابط الضرورية بداخله، ثم يتم تعيين الخاصية float بالاتجاه المطلوب. خذ بعين الاعتبار المثال التالي:

Ul (نمط القائمة: لا شيء؛) ul li a (العرض: كتلة؛ العرض: 130 بكسل؛ الارتفاع: 30 بكسل؛ محاذاة النص: المركز؛ اللون: #fff؛ تعويم: يسار؛ الخلفية: #95CFEF؛ الحدود: 1 بكسل مصمت # 36F؛ الهامش: 30 بكسل 5 بكسل)

نحصل على ما يلي:

ومع ذلك، سوف يظهر لنا IE:

ليست الملاحة ودية للغاية، أليس كذلك؟ ومع ذلك، هناك طريقتان لإصلاح هذا السلوك غير السار.

الطريقة الأولى

إن أبسط طريقة هي تعيين الخاصية float ليس على الروابط، بل على عناصر القائمة li.

أول لي (تعويم: اليسار؛)

الطريقة الثانية

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

Ul li (العرض: مضمن)

3. مسافة بادئة مزدوجة للعناصر ذات مجموعة الخصائص العائمة

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

لنلقي نظرة على مثال:

#element( الخلفية: #95CFEF؛ العرض: 300 بكسل؛ الارتفاع: 100 بكسل؛ تعويم: يسار؛ الهامش: 30 بكسل 0 0 30 بكسل؛ الحد: 1 بكسل #36F; )

نتيجة متوقعة:

ومع ذلك، في IE6 سنرى ما يلي:

نحن نصلحه

يتم تصحيح ذلك بنفس طريقة تصحيح المشكلة مع تأثير الخطوات. أي أننا قمنا بتعيين خاصية العرض: المضمّنة للعنصر. سوف يتغير الكود الخاص بنا مثل هذا:

#element( الخلفية: #95CFEF؛ العرض: 300 بكسل؛ الارتفاع: 100 بكسل؛ تعويم: يسار؛ الهامش: 30 بكسل 0 0 30 بكسل؛ الحد: 1 بكسل #36F؛ العرض: مضمن؛ }

4. عناصر ذات ارتفاع صغير.

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

والنتيجة هي عنصر بارتفاع 2 بكسل وحدود 1 بكسل.

دعونا إصلاحه.

سبب هذا الخطأ بسيط للغاية: يقوم IE ببساطة بتغيير ارتفاع العنصر إلى الارتفاع يساوي الحجمالخط. وبالتالي، قمنا ببساطة بتعيين حجم الخط إلى الصفر.

#element( الخلفية: #95CFEF؛ الحد: 1 بكسل #36F؛ العرض: 300 بكسل؛ الارتفاع: 2 بكسل؛ الهامش: 30 بكسل 0؛ حجم الخط: 0; }

النهج الثاني

آخر طريقة جيدة- هو الاستخدام خاصية الفائض، يجب تطبيق القيمة المخفية. وبعد ذلك سيكون العنصر بالارتفاع المطلوب.

#element( الخلفية: #95CFEF؛ الحد: 1 بكسل #36F؛ العرض: 300 بكسل؛ الارتفاع: 2 بكسل؛ الهامش: 30 بكسل 0؛ إخفاء الفائض؛ }

5. الفائض والموضع النسبي للعناصر.

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

#element( الخلفية: #95CFEF؛ الحد: 1 بكسل #36F؛ العرض: 300 بكسل؛ الارتفاع: 150 بكسل؛ الهامش: 30 بكسل 0؛ التجاوز: تلقائي؛) #anotherelement( الخلفية: #555؛ العرض: 150 بكسل؛ الارتفاع: 175 بكسل؛ الموضع : نسبي؛ الهامش: 30 بكسل)

نتيجة متوقعة:

النتيجة في آي إي:

دعونا إصلاحه.

إن أبسط طريقة لحل المشكلة هي تعيين العنصر الأصل تحديد المواقع النسبية.

#element( الخلفية: #95CFEF؛ الحد: 1 بكسل #36F؛ العرض: 300 بكسل؛ الارتفاع: 150 بكسل؛ الهامش: 30 بكسل 0؛ الفائض: تلقائي؛ الموقف: نسبي؛ }

6. نموذج الصندوق

يفسر Internet Explorer نموذج الصندوق بشكل غير صحيح.

على سبيل المثال هناك 2 عنصر div. أحدهما تم إصلاح الخلل والآخر لا. سيكون هناك فرق في الحجم بينهما يساوي المبلغالحشو الداخلي.

نحن نصلحه

سأخبرك عن النموذج الصحيح في مقال آخر، ولكن الآن سأوضح لك كيفية إصلاحه.

النقطة المهمة هي أنه بالنسبة لـ IE5/6 يجب ضبط الارتفاع والعرض بشكل منفصل. على سبيل المثال، أفعل ذلك مثل هذا:

لجميع المتصفحات

#element( العرض: 400 بكسل; الارتفاع: 150 بكسل; الحشو: 50 بكسل; )

بالنسبة إلى IE، عليك القيام بذلك:

#element ( العرض: 400 بكسل; الارتفاع: 150 بكسل; \الارتفاع: 250 بكسل; \العرض: 500 بكسل )

تقوم بشكل أساسي بإضافة قيم الحشو إلى أبعاد العنصر لـ IE6.

7. تحديد الحد الأدنى للأحجام.

الحد الأدنى للعرض والارتفاع لا يمكن الاستغناء عنه عند القيام بذلك تصميم جميل. لسوء الحظ، يتجاهل IE خصائص min-height وmin-width.

نحن نصلحه

لحل المشكلة، دعونا نستخدم المعرف المهم.

#element ( الحد الأدنى للارتفاع: 150 بكسل؛ الارتفاع: تلقائي! مهم؛ الارتفاع: 150 بكسل؛ )

الخيار الثاني.

إذا أخذنا في الاعتبار حقيقة أن IE لا يفهم المحددات المتداخلة، فيمكننا القيام بذلك:

#element ( الحد الأدنى للارتفاع: 150 بكسل؛ الارتفاع: 150 بكسل؛ ) html>body #element ( الارتفاع: تلقائي؛ )

8. السلوك غير الصحيح في النموذج العائم.

أحد أهم المفاهيم في التخطيط بدون جدول باستخدام CSS هو التعويم. في أغلب الأحيان، يتعامل IE6 مع هذا بشكل صحيح، ولكن في بعض الأحيان تكون هناك مشكلات. على سبيل المثال، عندما يكون المحتوى غير منقسم أو يكون عرض العنصر أكبر من عرض العنصر الأصلي. في هذه الحالات، ينقطع الترميز. دعونا نرى مثالا.

#element، #anotherelement( الخلفية: #95CFEF؛ الحد: صلب 1 بكسل #36F؛ العرض: 100 بكسل؛ الارتفاع: 150 بكسل؛ الهامش: 30 بكسل؛ الحشو: 10 بكسل؛ تعويم: يسار؛) #container( الخلفية: #C2DFEF؛ الحدود: صلب 1px #36F؛ الهامش: 30px؛

حصلت عليه في IE:

كما ترون، تم توسيع القسم الأول ليناسب عرض المحتوى ودفع القسم المجاور إلى السطر التالي.

نحن نصلحه

لا يوجد حل جميل . ولكن يمكنك، على سبيل المثال، تطبيق خاصية overflow: Hidden، ولكن بعد ذلك سيتم قطع المحتوى ولن يكون جزء منه مرئيًا.

#element( الخلفية: #C2DFEF؛ الحد: 1 بكسل #36F؛ العرض: 365 بكسل؛ الهامش: 30 بكسل؛ الحشو: 5 بكسل؛ الفائض: مخفي؛ )

9. مسافة إضافية بين عناصر القائمة.

يضيف IE 6 حشوة إضافية إلى القوائم الرأسية. لنلقي نظرة على مثال.

• الرابط 1
• الرابط 2
• الرابط 3

Ul ( هامش: 0؛ الحشو: 0؛ نمط القائمة: لا شيء؛ ) لي أ ( الخلفية: #95CFEF؛ العرض: كتلة؛ )

كيف ينبغي أن تبدو:

ما يظهره IE:

الطريقة الأولى

أسهل طريقة هي تحديد العرض أو الارتفاع للارتباط.

لي أ (الخلفية: #95CFEF؛ العرض: كتلة؛ العرض: 200 بكسل؛ }

الطريقة الثانية

الطريقة التالية هي ضبط التعويم: لليسار ثم مسحه.

لي أ (الخلفية: #95CFEF؛ تعويم: يسار؛ واضح: يسار؛ }

الطريقة الثالثة

الطريقة الثالثة هي ضبط العرض: مضمّن على العنصر li. والذي، بالمناسبة، سيصلح خطأ الهامش المزدوج الموضح أعلاه.

يعد استخدام هامش: تلقائي لتوسيط عنصر الكتلة أفقيًا أمرًا جيدًا طريقة معروفة. ولكن هل سبق لك أن تساءلت كيف يعمل؟

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

"تلقائي" - يشغل كل المساحة المتاحة

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

عرض المثال

هذا يعمل فقط مع الحشو الأفقي. ولكنها لن تعمل مع العناصر العائمة والمضمنة. وأيضًا للعناصر ذات الموضع المطلق والثابت.

محاكاة السلوك العائم من خلال تخصيص المساحة المتوفرة

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

عرض المثال

"تلقائي" - اضبط 0 بكسل

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

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

السيارات لن تعمل مع المعيار أيضًا عنصر الكتلة، إذا لم يتم تحديد عرض له. في جميع الأمثلة التي قدمتها، كان للعناصر عرض محدد.

ستحدد القيمة auto مساحة 0 بكسل عند ضبط عرض عنصر الكتلة على auto أو 100%. عادةً ما يشغل عرض الحاوية بالكامل، لذلك سيتبقى 0 بكسل لعرض الحشو.

ماذا يحدث للحشوة العمودية عند الضبط على الوضع التلقائي؟

يتم دائمًا حساب تلقائي لكل من المساحة المتروكة العلوية والسفلية في CSS على أنها 0 بكسل ( باستثناء العناصر الموضوعة تماما). تنص مواصفات W3C على ما يلي:

"إذا تم تعيين "الهامش العلوي" أو "الهامش السفلي" على "تلقائي"، فسيتم ضبطهما على 0."

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

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

أو بسبب تأثير الجمع بين المسافات البادئة (دمج المسافات البادئة العناصر المجاورة ). وهذا استثناء آخر ل من هذه القاعدةتحديد الإزاحات العمودية.

توسيط العناصر الموضوعة بشكل مطلق

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

تقول مواصفات W3C أخرى:

"إذا تم ضبط المواضع الثلاثة ("يسار" و"عرض" و"يمين") على "تلقائي"، فاضبط أولاً "margin-left" و"margin-right" على 0...
» إذا تم تحديد "تلقائي" فقط لـ "الهامش الأيسر" و"الهامش الأيمن"، فقم بحل المعادلة باستخدام حالة إضافيةبحيث يكون لكل من الحشوات نفس العرض."

تم وصف الموقف المتعلق بالقيمة التلقائية للحشوة الأفقية هنا بشيء من التفصيل. للتأكد من أن هذه الحشوات بنفس الحجم، لا ينبغي ضبط left و width و right على auto ( قيمتها الافتراضية). لتوسيط عنصر أفقيًا، تحتاج إلى ضبط عرض العنصر الذي تم وضعه بشكل مطلق على قيمة معينة، ويجب أن يكون لليسار واليمين قيم متساوية.

في المواصفات المذكورة أيضاشيء مشابه للحشوة العلوية لقسم CSS.

"إذا تم ضبط "أعلى" و"ارتفاع" و"أسفل" على "تلقائي"، فاضبط "أعلى" على ثابت..."

"إذا لم يتم تعيين أحد المواضع الثلاثة على "تلقائي": إذا تم تعيين "أعلى" و"أسفل" على "تلقائي"، فقم بحل المعادلة بشرط إضافي لتعيين هذه الحشوات على نفس القيم."

لذلك، لتوسيط عنصر تم وضعه بشكل مطلق عموديًا، يجب عدم ضبط top و height و Bottom على auto .

والآن بعد جمع كل هذا معًا نحصل على ما يلي:

عرض المثال

خاتمة

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

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

ترجمة المقال " CSS – الهامش التلقائي – كيف يعمل"تم إعداده من قبل فريق المشروع الودي.

جيد سيئ

يعد استخدام هامش: تلقائي لتوسيط عنصر الكتلة أفقيًا أسلوبًا معروفًا. ولكن هل سبق لك أن تساءلت كيف يعمل؟

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

"تلقائي" - يشغل كل المساحة المتاحة

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

عرض المثال

هذا يعمل فقط مع الحشو الأفقي. ولكنها لن تعمل مع العناصر العائمة والمضمنة. وأيضًا للعناصر ذات الموضع المطلق والثابت.

محاكاة السلوك العائم من خلال تخصيص المساحة المتوفرة

يقوم تلقائيًا بتوزيع كل المساحة الحرة بالتساوي بين الهوامش اليمنى واليسرى. ولكن ماذا يحدث إذا قمنا بتعيين هذه القيمة لواحدة فقط من الحشوات؟ ثم سيشغل كل المساحة المتاحة، وسيتم إزاحة العنصر إلى الحافة اليمنى أو اليسرى.

عرض المثال

"تلقائي" - اضبط 0 بكسل

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

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

لن يعمل auto أيضًا على عنصر كتلة قياسي ما لم يكن له عرض محدد. في جميع الأمثلة التي قدمتها، كان للعناصر عرض محدد.

ستحدد القيمة auto مساحة 0 بكسل عند ضبط عرض عنصر الكتلة على auto أو 100%. عادةً ما يشغل عرض الحاوية بالكامل، لذلك سيتبقى 0 بكسل لعرض الحشو.

ماذا يحدث للحشوة العمودية عند الضبط على الوضع التلقائي؟

يتم دائمًا حساب تلقائي لكل من المساحة المتروكة العلوية والسفلية في CSS على أنها 0 بكسل ( باستثناء العناصر الموضوعة تماما). تنص مواصفات W3C على ما يلي:

"إذا تم تعيين "الهامش العلوي" أو "الهامش السفلي" على "تلقائي"، فسيتم ضبطهما على 0."

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

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

أو بسبب تأثير الجمع بين المسافات البادئة (دمج المسافات البادئة للعناصر المجاورة). وهذا استثناء آخر لقاعدة التباعد الرأسي هذه.

توسيط العناصر الموضوعة بشكل مطلق

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

تقول مواصفات W3C أخرى:

"إذا تم ضبط المواضع الثلاثة ("يسار" و"عرض" و"يمين") على "تلقائي"، فاضبط أولاً "margin-left" و"margin-right" على 0...
"إذا تم تحديد "تلقائي" فقط لـ "الهامش الأيسر" و"الهامش الأيمن"، فقم بحل المعادلة بشرط إضافي وهو تحديد نفس العرض لكلا الهامشين."

تم وصف الموقف المتعلق بالقيمة التلقائية للحشوة الأفقية هنا بشيء من التفصيل. للتأكد من أن هذه الحشوات بنفس الحجم، لا ينبغي ضبط left و width و right على auto ( قيمتها الافتراضية). لتوسيط عنصر أفقيًا، تحتاج إلى ضبط عرض العنصر الذي تم وضعه بشكل مطلق على قيمة معينة، ويجب أن يكون لليسار واليمين قيم متساوية.

في المواصفات المذكورة أيضاشيء مشابه للحشوة العلوية لقسم CSS.

"إذا تم ضبط "أعلى" و"ارتفاع" و"أسفل" على "تلقائي"، فاضبط "أعلى" على ثابت..."

"إذا لم يتم تعيين أحد المواضع الثلاثة على "تلقائي": إذا تم تعيين "أعلى" و"أسفل" على "تلقائي"، فقم بحل المعادلة بشرط إضافي لتعيين هذه الحشوات على نفس القيم."

لذلك، لتوسيط عنصر تم وضعه بشكل مطلق عموديًا، يجب عدم ضبط top و height و Bottom على auto .

والآن بعد جمع كل هذا معًا نحصل على ما يلي:

عرض المثال

خاتمة

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

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

ترجمة المقال " CSS – الهامش التلقائي – كيف يعمل"تم إعداده من قبل فريق المشروع الودي.

جيد سيئ

تتمركز عموما عناصر HTMLعلى الصفحة - هذه ليست مسألة صعبة. في بعض الحالات... يتعين على مطوري الويب بذل قصارى جهدهم للعثور على أفضل الحلول.

إن توسيط العناصر أفقيًا ليس بالأمر الصعب؛ فهو يثير بالفعل تساؤلات، ولكن الجمع بينها بشكل عام قد يؤدي إلى طريق مسدود. في العصر تصميم التكيفنادرًا ما نكون واضحين بشأن الأبعاد الدقيقة لعناصر معينة. لقد أحصيت 6 بطرق متعددةتوسيط العناصر مع باستخدام CSS. دعنا نبدء ب أمثلة بسيطة، دعنا ننتهي بأخرى أكثر تعقيدًا. سيعمل بنفس كود HTML:

المحاذاة الأفقية باستخدام محاذاة النص

في بعض الأحيان يكون الحل الأبسط هو الأفضل:

Div.center ( محاذاة النص: المركز؛ الخلفية: hsl(0, 100%, 97%); ) div.center img ( العرض: 33%; الارتفاع: تلقائي; )

لا يوجد توسيط رأسي هنا: لهذا ستحتاج إلى إضافة خصائص الهامش العلوي والهامش السفلي إلى القسم.

توسيط مع الهامش: تلقائي

حل آخر للمحاذاة الأفقية:

Div.center ( الخلفية: hsl(60, 100%, 97%); ) div.center img ( العرض: كتلة; العرض: 33%; الارتفاع: تلقائي; الهامش: 0 تلقائي;)

يرجى ملاحظة أنه في هذه الطريقة تحتاج إلى ضبط خاصية العرض: الكتلة.

توسيط باستخدام خلية الجدول

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

محاذاة للوسط ( العرض: جدول؛ الخلفية: hsl (120، 100٪، 97٪)؛ العرض: 100٪؛ ) .center-core ( العرض: خلية جدول؛ محاذاة النص: المركز؛ محاذاة رأسية: وسط؛ ) .center-core img (العرض: 33%؛ الارتفاع: تلقائي؛)

لكي يعمل كل شيء بشكل صحيح، يجب ضبط div على width: 100%. لتوسيط العنصر عموديا، نستخدم باستخدام التقنيات القياسية، تحديد الارتفاع. يعمل في كل مكان، بما في ذلك IE8+.

المحاذاة المطلقة

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

محاذاة مطلقة ( الموضع: نسبي؛ الحد الأدنى للارتفاع: 500 بكسل؛ الخلفية: hsl(200, 100%, 97%); ) .img محاذاة مطلقة ( العرض: 50%; الحد الأدنى للعرض: 200 بكسل; الارتفاع: تلقائي؛ تجاوز السعة : تلقائي؛ الهامش: تلقائي؛ الموضع: الأعلى: 0؛

مركز باستخدام الترجمة

حل جديد حيث يستخدم تحويلات CSS. يوفر كلا من المحاذاة الأفقية والرأسية:

المركز ( الخلفية: hsl(180, 100%, 97%)); الموضع: نسبي; الحد الأدنى للارتفاع: 500 بكسل; ) .center img ( الموضع: مطلق; الأعلى: 50%; اليسار: 50%; التحويل: ترجمة(-50) %، -50%)؛ العرض: 30% الارتفاع: تلقائي)

هناك عدة عيوب:

• تتطلب خاصية تحويل CSS بادئات المتصفح
• لا يعمل في الإصدارات الأقدم من IE (8 وما دونه)
• يجب إعطاء الحاوية الخارجية ارتفاعًا.
• إذا كان هناك نص داخل الحاوية، فقد يكون ضبابيًا بعض الشيء.

توسيط باستخدام نوع العرض المرن

ربما الخيار الأبسط.

المركز ( الخلفية: hsl(240, 100%, 97%)); العرض: flex; ضبط المحتوى: center; محاذاة العناصر: center; ) .center img ( width: 30%; height: auto; )

لا يعمل في جميع إصدارات IE (على الرغم من أنه يمكنك حماية نفسك باستخدام العرض: table-cell بالإضافة إلى ذلك). CSS الكامل:

المركز ( الخلفية: hsl(240, 100%, 97%)); العرض: -webkit-box; /* Safari، iOS 6 و الإصدارات السابقة; Android، WebKit القديم */ العرض: -moz-box; /* Firefox (قد يكون به أخطاء) */ Display: -ms-flexbox; /* IE 10 */ العرض: -webkit-flex; /* كروم 21+ */ العرض: flex; /* أوبرا 12.1+، فايرفوكس 22+ */ -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; محاذاة العناصر: مركز؛ -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; ضبط المحتوى: مركز؛ )

توسيط باستخدام الحساب

في بعض الحالات، هذه الطريقةأكثر تنوعًا من استخدام flexbox:

المركز ( الخلفية: hsl(300, 100%, 97%)); الحد الأدنى للارتفاع: 600 بكسل; الموضع: نسبي; ) .center img ( العرض: 40%; الارتفاع: تلقائي; الموضع: مطلق; الأعلى:calc(50% - 20%؛ اليسار: احسب (50% - 20%)؛

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

الأعلى: الكالسيوم(50% - (40% / 2)); اليسار: calc(50% - (40% / 2));

في الممارسة العملية قد تجد ذلك هذه الطريقةيعمل بشكل جيد إذا عرفنا أحجام العناصر:

مركز الصورة ( العرض: 500 بكسل; الارتفاع: 500 بكسل; الموضع: مطلق; الأعلى:calc(50% - (300px / 2)); اليسار: calc(50% - (300px - 2)); )

هذه الطريقة مدعومة في متصفح Firefox، بدءًا من الإصدار 4، ستحتاج إلى تسجيل بادئات المتصفح. لا يعمل في آي إي 8. الكود الكامل:

الصورة المركزية ( العرض: 40%؛ الارتفاع: تلقائي؛ الموضع: مطلق؛ الأعلى: -webkit-calc(50% - 20%))؛ اليسار: -webkit-calc(50% - 20%))؛ الأعلى: -moz-calc (50% - 20%)؛ اليسار: -moz-calc(50% - 20%)؛ الأعلى: calc(50% - 20%))؛

آمل أن تكون هذه الطرق كافية لتجد الحل الأفضل لنفسك.