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

Badraoui · 29 فبراير 2016

قمت بكتابة هذا الجزء من الكود الخاص بـ 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 وخصوصا عند إضافة الصورة، فكيف أحل هذا المشكل؟

تم التعديل في 29 فبراير 2016 بواسطة Badraoui

E.Nourddine · 1 مارس 2016

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

div > img {
    display: block;
}

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

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

تم التعديل في 1 مارس 2016 بواسطة E.Nourddine

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

السؤال

Badraoui

1 جواب على هذا السؤال

Recommended Posts

E.Nourddine

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية