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

Mohamed Atia4 · 6 أبريل

<!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 أبريل

ذلك بسبب أنك قمت بتحديد الخاصية 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 أبريل

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

Mustafa Suleiman · 6 أبريل

بتاريخ 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

رابط هذا التعليق

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية