ليه مقدرش اعمل للديفات كلها margin --> auto ؟

Mohamed Atia4 · 6 أبريل 2024

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="1.css">
</head>
<body>
    <div>
        <p>Shape 1</p>
    </div>    
    <div>
        <p>Shape 2</p>
    </div>    
    <div>
        <p>Shape 3</p>
    </div>
</body>
</html>

div {
    background-color: #d4d4d4;
    display: inline-block;
    width: 200px;
    height: 100px;
    padding: 5px;
    margin: auto;
}

عبدالباسط ابراهيم · 6 أبريل 2024

ذلك بسبب أنك قمت بتحديد الخاصية display: inline-block; وهي التي تمنع تنفيذ التنسيق

    margin: auto;

حيث أن العناصر ال inline-block تأخذ فقط عرض وإرتفاع محدد فقط على قدر حجمها لذلك لا ينفع استخدام ال margin: auto; مع استخدام ل inline-block

ولكن بما أنك تريد توسيط الثلاث عناصر في منتصف الموقع يمكنك استخدام الخاصية text-align: center; على العنصر الأساسي الـ <body> في هذه الحالة كالتالي

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="1.css">
    <style>
        body {
            text-align: center;
        }
        div {
            background-color: #d4d4d4;
            display: inline-block;
            width: 200px;
            height: 100px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div>
        <p>Shape 1</p>
    </div>    
    <div>
        <p>Shape 2</p>
    </div>    
    <div>
        <p>Shape 3</p>
    </div>
</body>
</html>

Mohamed Atia4 · 6 أبريل 2024

بس ده كده هيخلي كل العناصر في النص؟

Mustafa Suleiman · 6 أبريل 2024

بتاريخ 4 دقائق مضت قال Mohamed Atia4:

بس ده كده هيخلي كل العناصر في النص؟

نستخدم margin: auto لوضع إزاحة بشكل تلقائي من خلال توزيع المساحة المتبقية على الجانبين بالتساوي.

لكن المشكلة أنك قمت بتعيين display: inline-block للعناصر div، مما يجعلها تتصرف بشكل مشابه للعناصر inline والتي تتموضع كما لو كانت داخل سطر واحد، مما يعني أنها لا تُنشئ مساحة كافية على جانبيها للتوزيع باستخدام margin.

لذا إذا أردت وضع إزاحة عليك تحديدها بشكل صريح كالتالي:

    margin: 20px;

لكن من الأفضل استخدام flex-box كالتالي:

<!DOCTYPE html>

<head>
    <style>
        .wrapper {
            display: flex;
            gap: 20px;
        }
        .box {
            background-color: #d4d4d4;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box">
            <p>Shape 1</p>
        </div>
        <div class="box">
            <p>Shape 2</p>
        </div>
        <div class="box">
            <p>Shape 3</p>
        </div>
    </div>
</body>

</html>

ليه مقدرش اعمل للديفات كلها margin --> auto ؟

السؤال

Mohamed Atia4

3 أجوبة على هذا السؤال

Recommended Posts

عبدالباسط ابراهيم

Mohamed Atia4

Mustafa Suleiman

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية