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