1 - مشكلة الـ overflow للصور 

 مشكلة شائعة جدا, تحط صورة معينة داخل أي container , ولما تحدد width معين لهذي الـ container , فجأة تنصدم إن الصورة صار لها overflow وطلعت خارج حدود الـ container ! 
 الحل: استخدام خاصية الـ max-width 
 مثال: 

 2 -مشكلة الفراغ الأبيض تحت الصور 

 أكيد لاحظت بالصور الي قبل إن حتى لما حلينا المشكلة الصورة بقيت فوق الـ border بشوية .. تاركة فراغ أبيض 
 ايش الحل؟ بإختصار نغير خاصية الـ display للصورة ونخليها block , والفراغ راح يختفي 
 مثال:

 3 - مشكلة إن الـ body element ماياخذ كامل طول الـ viewport 

 الحل بإختصار إنك تضيف height للـ html وتخليه 100% ( لأن الـ body له أب وهو الـ html tag , فلازم يكون عليه طول كمان ) وبعدها تغير الـ height للـ body بنفسه وتخليه 100% لكن لا تستخدم height , استخدم min-height أفضل 

 وإذا عندك فضول ليش المفروض نستخدم min-height بدل الـ height مباشرة؟ لأن الطول للـ body يحتاج يكبر أحيانا , فلو خليت أكبر قيمة له تساوي 100% ( طول الـ viewport ) ممكن تواجه مشاكل الـ overflow والي هي دايما مزعجة 

 كتبه @Webnprog