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