وخليني أكلمك بسرعة عن الـMargin Collapsing، وإزاي ممكن 25px + 25px تساوى 25px في النهاية! مش مصدق؟ طب خليني أشرحلك، يا عم صبرك عليا خمسة بس وهشرحلك كل حاجة والله 😂
بص يا سيدي، دلوقتي هنفترض عندك اتنين Div Element، وبحكم ان الـDiv عنصر Block-Level وبياخد الـBlock كله فـ كل Div هيبقى في صف لوحده والـDiv التاني هينزل تحتيه، مظبوط كدة؟ طب حلو أوي
يبقى احنا حاليًا عندنا اتنين Div والاتنين على شكل رأسي فوق بعض، فـ ببساطة لو اديت الاتنين Margin، بحيث ان الاولاني هياخد Margin Bottom والتاني هياخد Margin Top، وكل واحد فيهم قيمة الـMargin هي الـ25px، تفتكر الـMargin اللي بين الاتنين هيبقى قد ايه؟
هتبقى 50px؟ لأ غلط، 25px بس!
ليه بقى؟ ده بسبب الـMargin Collapsing، ببساطة الـMargin بشكل رأسي (Vertical) بيعمل Overlapping على أي Vertical Margin حواليه، وفي النهاية الـMargin بينهم هتبقى قيمة أكبر Margin فيهم وخلاص، ولو الاتنين قيمتهم واحدة هيبقى الـMargin بينهم نفس القيمة!
ده طبعًا بيحصل في الـVertical Margin بس، وفي حالات كتير مش بيحصل فيها (وهي الشائعة الحقيقة)، ولكن أهي معلومة كويسة تبقى عارفها وعارف ازاي تتفاداها، ماقولتلكش ازاي تتفاداها؟ ماتقلقش في أول كومنت هتلاقي شرح مفصل للحالات اللي بتحصل فيها وانت اتعامل بقى 😄
وبس كدة، ده الموضوع ببساطة.
الجينيص
CSS Notes
الجينيص