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

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

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

عرض المثال

خاتمة

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

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

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

جيد سيئ

هناك عدة وجهات نظر حول الاستخدام الهوامش السلبية في CSSكلاهما سلبي بشكل حاد وإيجابي بحت.

الحقل السلبي في قاعدة CSSعلى النحو التالي:

CSS

#content (الهامش الأيسر:-100 بكسل؛)

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

• الصلاحية في CSS
  يخبرنا W3C: ‛ القيم السلبيةل خصائص الهامشيجوز استخدامه." مزيد من التفاصيل على www.w3.org/TR/CSS2/box.html#margin-properties
• الهوامش السلبية ليست HACK
  وهذا يأتي من سوء الفهم ومن تأثير خارجيهامش سلبي على التخطيط. المرة الوحيدة التي يمكن أن يصبح فيها الهامش السلبي اختراقًا هي عندما تحاول إصلاح خطأ في التعليمات البرمجية الخاصة بك باستخدام هامش سلبي.
• التأثير على التدفق
  لا تؤدي الهوامش السلبية إلى كسر التدفق عند تطبيقها على العناصر "غير العائمة". بمعنى، إذا استخدمت هامشًا سالبًا لدفع عنصر ما للأعلى، فكل شيء كذلك العناصر التاليةسيتم رفعها أيضًا.
• رد فعل مختلف عند استخدامه مع الطفو
  لا تزال الهوامش السلبية غير مألوفة في CSS، لذا يجب عليك استخدام هذه الهوامش بحذر.
• بعض المشاكل دريمويفر
  لا يوجد شيء للمناقشة هنا.
• التوافق الكامل
  الهوامش السلبية مدعومة من قبل كافة المتصفحات، بما في ذلك IE6.

العمل مع الهوامش السلبية (الهامش)

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

الصورة توضح كيف عنصر ثابتيتفاعل مع المجالات السلبية.

• عندما يتلقى عنصر ثابت هامشًا علويًا/يسارًا سلبيًا، فإن العنصر "يتحرك" في الاتجاه المحدد (أعلى/يسار).

  CSS

  /* يتحرك العنصر بمقدار 10 بكسل لأعلى */ #mydiv1 (الهامش العلوي:-10 بكسل;)
• لكن إذا استخدمته للأسفل/لليمين، فلن يتحرك العنصر في الاتجاه للأسفل/لليمين كما تفترض. بدلاً من ذلك، سيؤدي هذا إلى دفع العنصر التالي إلى العنصر الرئيسي، مما يؤدي إلى تداخله.

  CSS

  /* جميع العناصر اللاحقة خلف #mydiv1 ستتحرك لأعلى بمقدار 10 بكسل، لكن #mydiv1 نفسه لن يتحرك */ #mydiv1 (margin-bottom:-10px;)
• إذا لم يكن للعنصر عرض محدد، فإن استخدام هامش سلبي في الاتجاه الأيسر/الأيمن سيدفع العنصر في كلا الاتجاهين مع زيادة عرض العنصر.

  CSS

  #mydiv1(margin:0 auto -20px; height: 150px; /*...*/) #mydiv2(margin:0 auto; height: 150px; /*...*/)

هامش سلبي للعناصر العائمة

خذ بعين الاعتبار العلامة التالية:

لغة البرمجة

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

  CSS

  #mydiv1 (عائم: يسار؛ الهامش الأيمن: -100 بكسل؛)
• إذا كان كلا العنصرين float:left و#mydiv1 له هامش يمين:-20px ، فإن #mydiv2 يعامل #mydiv1 كما لو كان أقل بمقدار 20 بكسل من عرضه الفعلي (وبالتالي يتداخل). ومن المثير للاهتمام أن محتوى #mydiv1 لا يستجيب لهذه المعالجات ويحتفظ بعرضه الحالي.
• إذا كان الهامش السلبي يساوي العرض الفعلي، فسيكون التداخل كاملاً. يحدث هذا بسبب إضافة الهوامش والحشو والحدود والعرض إلى العرض الفعلي للعنصر. لذلك إذا كان الهامش السلبي يساوي العرض الإجمالي لجميع الخصائص المذكورة أعلاه، فإن العرض الفعلي للعنصر يصبح 0.

تقنيات فعالة تعتمد على استخدام الهامش السلبي

منذ أن علمنا أن هناك مجال سلبي رمز صالح، عديد تقنيات مفيدة CSS على أساس هذه التقنية.

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

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

لغة البرمجة

• بيض
• لحم خنزير
• خبز
• سمنة
• دقيق
• كريم

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

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

في هذا الجزء من المقال سأكتب عن الهامش الرأسي. سنتحدث عن الأفقي في الجزء التالي.

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

سم، مم، بوصة، جهاز كمبيوتر، نقطة- وحدات القياس المطلقة. يوصى باستخدامه عند طباعة المستندات.

بكسل، م، السابقين،٪ - الوحدات النسبية، تستخدم للمراقبين.

بالنسبة للهامش، أستخدم بكسلو % ، أ م- لتحديد أحجام الخطوط. Ex (في IE ex = em / 2) – لا أوصي باستخدامه، لأنه يتم تفسيره بشكل مختلف في كل متصفح.

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

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

يعرف كل مصمم تخطيط أنه يمكن تمثيل أي عنصر في 4 مناطق (الهامش، والحدود، والحشوة، والمحتوى).

هامِش - هامِش. يختلف بناء الهوامش رأسياً وأفقياً.

كما كتبت أعلاه، يمكن تعيين أبعاد الهامش في em، ex، px - إعداد جامد، وفي٪ - يتم حسابها بالنسبة لبعض المناطق.

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

هناك قسمان: القسم الأول والثاني.


#أولاً(
الحشو: 100 بكسل؛
الخلفية: #b5bcbc؛
}
#ثانية(
الارتفاع: 100 بكسل؛
الخلفية: #b06b48؛
الهامش: 30% 0 0;
}

يرجى ملاحظة أنني لم أقم بتعيين خاصية العرض على أي قسم (سنتحدث عن هذا لاحقًا). الآن نحن مهتمون فقط بالهامش، وهو يساوي الهامش: 30% 0 0;

آمل أن يعرف الجميع كيف يتم النظر في الهامش في هذه الحالة، فقط في حالة، اسمحوا لي أن أذكرك أنه يتم حسابه في اتجاه عقارب الساعة، أي: الهامش في الأعلى سيكون 30٪، على اليمين - 0، في الأسفل - 0 وعلى اليسار - لأنني لم أحدد أي شيء ، يأخذ الهامش قيمة الجانب المقابل، أي في هذه الحالة، إذا كان الهامش على اليمين هو 0، فإن الهامش على اليسار، إذا لم يتم تحديده، هو أيضًا 0.

لكننا الآن مهتمون بالهامش، الذي يساوي 30%، والمعروف أيضًا بالمسافة البادئة العلوية. ومن أين تأتي هذه الـ30%؟

كثير من الناس يعتقدون ويعتقدون بشكل خاطئ أن 30% مأخوذة من أعلى الصفحة بأكملها.


ولكن هذا ليس صحيحا!

نظرًا لأنه في هذه الحالة، يتم دمج القسم الثاني داخل القسم الأول، فسيتم حساب هامش أعلى: 30٪ بالنسبة إلى عرض القسم الأصلي الثاني، أي بالنسبة إلى عرض القسم الأول!


في هذه الحالة، يكون عرض div الأول تلقائيًا بشكل افتراضي، وبالتالي فإن div يأخذ كل المساحة الحرة في العرض، ومن هذا العرض سيتم حساب الهامش العلوي بنسبة 30% لقسم div الثاني.

عندما يتم تصغير حجم القسم الأصلي، سيتم أيضًا تقليل المساحة العلوية للقسم الثاني.

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

على سبيل المثال: قسمان يقع أحدهما أسفل الآخر.

إذا أضفنا الهامش السفلي: -100 بكسل إلى القسم الأول، والهامش العلوي: -50 بكسل إلى القسم الثاني
#أولاً(
الارتفاع: 200 بكسل؛
الخلفية: #69ج؛
الهامش: 0 0 -100 بكسل؛
}
#ثانية(
الارتفاع: 200 بكسل؛
الخلفية: #f60؛
الهامش: -50px 100px 0;
}

ثم سيحدث ما يلي.


ولكن... هذا هو المكان الذي يرتكب فيه المبتدئون الخطأ الكبير.

يعتقد الكثير من الناس أنه نظرًا لأن الهامش العلوي لقسم القسم العلوي يبلغ -100 بكسل، والهامش السفلي لقسم القسم العلوي -50 بكسل، فإن القسم السفلي "سيتجاوز" الهامش العلوي بمقدار -150 بكسل.

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

في هذه الحالة، سيتداخل القسم السفلي مع القسم العلوي بمقدار 100 بكسل، ولن يتم أخذ 50 بكسل في الاعتبار.

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

النظر في المثال التالي.
هناك مغنيتان، واحدة أسفل الأخرى.


#أولاً(
الارتفاع: 200 بكسل؛
الخلفية: #69ج؛
الهامش: 0 0 -100 بكسل؛
}
#ثانية(
الارتفاع: 200 بكسل؛
الخلفية: #f60؛
الهامش: 50 بكسل 100 بكسل 0؛
}

أولاً
ثانية

كما ترون، الهامش السفلي للأول سالب، والهامش العلوي للثاني موجب، ماذا سيحدث في هذه الحالة؟

بالنسبة للهوامش المقابلة، سيتم إجراء عملية جمع، وهي: -100 + 50 = -50. وفقًا لذلك، سيتحرك القسم السفلي بمقدار 50 بكسل.

قسمان، أحدهما متداخل داخل الآخر.


#أولاً(
الخلفية: #b5bcbc؛
}
#ثانية(
الارتفاع: 200 بكسل؛
الخلفية: #b06b48؛
}

إذا أضفت هامشًا أعلى بمقدار 200 بكسل إلى القسم الداخلي،
#ثانية(
الارتفاع: 200 بكسل؛
الخلفية: #b06b48؛
الهامش العلوي: 200 بكسل؛
}

حسنًا، هنا خطأ آخر! يعتقد بعض الأشخاص أن الهامش الداخلي يجب أن "يتحرك" بمقدار 200 بكسل للأسفل من الجزء الأصلي، بينما سيظل الجزء الأصلي في مكانه، وبالتالي يمتد.


ولكن، بغض النظر عن كيف هو!

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


ولكن ماذا لو لم نكن بحاجة إلى هذا ونريد أن يبقى القسم الأصلي في مكانه، وأن يتحرك القسم الفرعي بمقدار 200 بكسل لأسفل؟

يمكنك إلغاء هذا الإجراء فيما يتعلق بالوالد هناك عدة طرق.
1. مهمة الحشو كتلة الوالدين
2. وضع الحدود للكتلة الأم
3. تعيين تجاوز السعة للكتلة الأصلية، أي قيمة باستثناء القيمة المرئية (يعمل في كل مكان باستثناء IE القديم)
وفويلا


أشكركم على اهتمامكم، وآمل أن أكون قد تمكنت من التوضيح للمبتدئين ما هو الهامش وكيفية حسابه بشكل صحيح ومن أين.
إذا كانت المقالة مفيدة وترغب في قراءة التكملة، فسوف أصف في الجزء التالي الهوامش الأفقية. الأمور ليست بهذه البساطة كما تبدو للوهلة الأولى ;)

14 يونيو 2011 الساعة 5:48 مساءً

دعونا نتحدث عن الهامش، المعروف أيضًا باسم الهامش (الجزء الأول)

• CSS

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

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

في هذا الجزء من المقال سأكتب عن الهامش الرأسي. سنتحدث عن الأفقي في الجزء التالي.

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

سم، مم، بوصة، جهاز كمبيوتر، نقطة- وحدات القياس المطلقة. يوصى باستخدامه عند طباعة المستندات.

بكسل، م، السابقين،٪- الوحدات النسبية المستخدمة للشاشات.

بالنسبة للهامش، أستخدم بكسلو % ، أ م- لتحديد أحجام الخطوط. Ex (في IE ex = em / 2) – لا أوصي باستخدامه، لأنه يتم تفسيره بشكل مختلف في كل متصفح.

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

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

يعرف كل مصمم تخطيط أنه يمكن تمثيل أي عنصر في 4 مناطق (الهامش، والحدود، والحشوة، والمحتوى).

الهامش - مسافة بادئة خارجية. يختلف بناء الهوامش رأسياً وأفقياً.

كما كتبت أعلاه، يمكن تعيين أبعاد الهامش في em، ex، px - إعداد جامد، وفي٪ - يتم حسابها بالنسبة لبعض المناطق.

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

هناك قسمان: القسم الأول والثاني.


#أولاً(
الحشو: 100 بكسل؛
الخلفية: #b5bcbc؛
}
#ثانية(
الارتفاع: 100 بكسل؛
الخلفية: #b06b48؛
الهامش: 30% 0 0;
}

يرجى ملاحظة أنني لم أقم بتعيين خاصية العرض على أي قسم (سنتحدث عن هذا لاحقًا). الآن نحن مهتمون فقط بالهامش، وهو يساوي الهامش: 30% 0 0;

أتمنى أن يعرف الجميع كيفية حساب الهامش في هذه الحالة، فقط في حالة أن أذكركم أنه يتم حسابه في اتجاه عقارب الساعة، أي: الهامش العلوي سيكون 30%، واليمين - 0، والأسفل - 0 والهامش left - نظرًا لأنني لم أشر إلى أي شيء، فإن الهامش يأخذ قيمة الجانب المقابل، أي في هذه الحالة، إذا كان الهامش الموجود على اليمين هو 0، فإن الهامش الموجود على اليسار، إذا لم يتم تحديده، يكون أيضًا 0.

لكننا الآن مهتمون بالهامش، الذي يساوي 30%، والمعروف أيضًا بالمسافة البادئة العلوية. ومن أين تأتي هذه الـ30%؟

كثير من الناس يعتقدون ويعتقدون بشكل خاطئ أن 30% مأخوذة من أعلى الصفحة بأكملها.


ولكن هذا ليس صحيحا!

نظرًا لأنه في هذه الحالة، يتم دمج القسم الثاني داخل القسم الأول، فسيتم حساب هامش أعلى: 30٪ بالنسبة إلى عرض القسم الأصلي الثاني، أي بالنسبة إلى عرض القسم الأول!


في هذه الحالة، يكون عرض div الأول تلقائيًا بشكل افتراضي، وبالتالي فإن div يأخذ كل المساحة الحرة في العرض، ومن هذا العرض سيتم حساب الهامش العلوي بنسبة 30% لقسم div الثاني.

عندما يتم تصغير حجم القسم الأصلي، سيتم أيضًا تقليل المساحة العلوية للقسم الثاني.

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

على سبيل المثال: قسمان يقع أحدهما أسفل الآخر.

إذا أضفنا الهامش السفلي: -100 بكسل إلى القسم الأول، والهامش العلوي: -50 بكسل إلى القسم الثاني
#أولاً(
الارتفاع: 200 بكسل؛
الخلفية: #69ج؛
الهامش: 0 0 -100 بكسل؛
}
#ثانية(
الارتفاع: 200 بكسل؛
الخلفية: #f60؛
الهامش: -50px 100px 0;
}

ثم سيحدث ما يلي.


ولكن... هذا هو المكان الذي يرتكب فيه المبتدئون الخطأ الكبير.

يعتقد الكثير من الناس أنه نظرًا لأن الهامش العلوي لقسم القسم العلوي يبلغ -100 بكسل، والهامش السفلي لقسم القسم العلوي -50 بكسل، فإن القسم السفلي "سيتجاوز" الهامش العلوي بمقدار -150 بكسل.

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

في هذه الحالة، سيتداخل القسم السفلي مع القسم العلوي بمقدار 100 بكسل، ولن يتم أخذ 50 بكسل في الاعتبار.

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

النظر في المثال التالي.
هناك مغنيتان، واحدة أسفل الأخرى.


#أولاً(
الارتفاع: 200 بكسل؛
الخلفية: #69ج؛
الهامش: 0 0 -100 بكسل؛
}
#ثانية(
الارتفاع: 200 بكسل؛
الخلفية: #f60؛
الهامش: 50 بكسل 100 بكسل 0؛
}

أولاً
ثانية

كما ترون، الهامش السفلي للأول سالب، والهامش العلوي للثاني موجب، ماذا سيحدث في هذه الحالة؟

بالنسبة للهوامش المقابلة، سيتم إجراء عملية جمع، وهي: -100 + 50 = -50. وفقًا لذلك، سيتحرك القسم السفلي بمقدار 50 بكسل.

قسمان، أحدهما متداخل داخل الآخر.


#أولاً(
الخلفية: #b5bcbc؛
}
#ثانية(
الارتفاع: 200 بكسل؛
الخلفية: #b06b48؛
}

إذا أضفت هامشًا أعلى بمقدار 200 بكسل إلى القسم الداخلي،
#ثانية(
الارتفاع: 200 بكسل؛
الخلفية: #b06b48؛
الهامش العلوي: 200 بكسل؛
}

حسنًا، هنا خطأ آخر! يعتقد بعض الأشخاص أن الهامش الداخلي يجب أن "يتحرك" بمقدار 200 بكسل للأسفل من الجزء الأصلي، بينما سيظل الجزء الأصلي في مكانه، وبالتالي يمتد.


ولكن، بغض النظر عن كيف هو!

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


ولكن ماذا لو لم نكن بحاجة إلى هذا ونريد أن يبقى القسم الأصلي في مكانه، وأن يتحرك القسم الفرعي بمقدار 200 بكسل لأسفل؟

يمكنك إلغاء هذا الإجراء فيما يتعلق بالوالد هناك عدة طرق.
1. تخصيص الحشوة للكتلة الأم
2. وضع الحدود للكتلة الأم
3. تعيين تجاوز السعة للكتلة الأصلية، أي قيمة باستثناء القيمة المرئية (يعمل في كل مكان باستثناء IE القديم)
وفويلا


أشكركم على اهتمامكم، وآمل أن أكون قد تمكنت من التوضيح للمبتدئين ما هو الهامش وكيفية حسابه بشكل صحيح ومن أين.
إذا كانت المقالة مفيدة وترغب في قراءة التكملة، فسوف أصف في الجزء التالي الهوامش الأفقية. الأمور ليست بهذه البساطة كما تبدو للوهلة الأولى ;)