• 0

كيف أحل شكل margin bottom داخل div عند استعمال صورة؟

قمت بكتابة هذا الجزء من الكود الخاص بـ div بداخلها صورة:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
    <head>
        <meta charset="utf-8"/>
        <title>Sandbox</title>
        <style>
            *{margin:0;padding:0;}
            div{
                background:red;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="image.jpg"/>
        </div>
    </body>
</html>

لكن ألاحظ وجود مشكل على مستوى margin bottom الخاص بـ div وخصوصا عند إضافة الصورة، فكيف أحل هذا المشكل؟

تمّ تعديل بواسطة Badraoui

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

اعرض وسم <img /> كـ block:

div > img {
    display: block;
}

حيث أن خاصية block ستعطي للصورة بداخل وسم div  إمكانية أخذ خصائص margin bottom.

إليك هذا المثال العملي من الرابط.

تمّ تعديل بواسطة E.Nourddine

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن