عمل مسافة بين عناصر ال css

Mohammed Hhhh · 16 مارس 2022

السلام عليكم ورحمة الله وبركاته

لدي مشكلة بأني لا استطيع عمل مسافه بين العناصر في ال css و كلما احاول فعل ذلك يقوم العنصر الأخير بالنزول الى الأسفل

صوره للمشكلة /

كود css :

.father{
    width: 800px ;
    background-color: darkgrey ;
    border: darkgrey 10px solid ;
    margin: 0px ;
    float: left ;
}
.clear{

    clear: both ;

}
.full-width{
    background-color: rgb(202, 202, 202);
    font-weight: 300 ;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 5px ;
    text-align: center ;
    height: 100px ;
    font-size: 50px ;
    width: 100% ;
    float: left ;
    margin: 0px ;
}
/* .clear{clear: both ;} */

.main{
    background-color: rgb(202, 202, 202);
    font-weight: 300 ;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 5px ;
    text-align: center ;
    height: 100px ;
    font-size: 50px ; 
    float: left ;

    margin-top: 10px ;
    width: 25%   ;
}

كود ال html :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/Examples/cssPage.css">
    <title>Examples</title>
</head>

<body>
    <div class="father">
        <div class="full-width"> FULL WIDTH </div> 
        <div class="clear"></div>
        <div class="main"> 1/4 </div>
        <div class="main"> 1/4 </div>
        <div class="main"> 1/4 </div>
        <div class="main"> 1/4 </div>
    </div>


</body>

</html>

و جزاكم الله كل خير

أسامة زيادة · 16 مارس 2022

ممتاز لقد كانت البداية موفقة جداً ، قمت بعمل التالي حسب ما فهمته من التمرين لديك أولاً أضفت كلاسات جديدة مع كلاس main كما هو موضح

<body>
    <div class="father">
        <div class="full-width"> FULL WIDTH </div> 
        <div class="clear"></div>
        <div class="main main-3"> 1/3 </div>
        <div class="main main-3"> 1/3 </div>
        <div class="main main-3"> 1/3 </div>
        <div class="main main-2"> 1/2 </div>
        <div class="main main-2"> 1/2 </div>
        <div class="main main-4"> 1/4 </div>
        <div class="main main-4"> 1/4 </div>
        <div class="main main-4"> 1/4 </div>
        <div class="main main-4"> 1/4 </div>
    </div>
</body>

ثم قمت بإعطاء تنسيقات عرض مناسبة حتى تظهر مثل الصورة

.main{
    background-color: rgb(202, 202, 202);
    font-weight: 300 ;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 5px ;
    text-align: center ;
    height: 100px ;
    font-size: 50px ; 
    float: left ;
    margin-top: 10px ;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-left: 15px;
} 
.main-3 {width: 250px;}
.main-2 {width: 385px;}
.main-4 {width: 185px;}

يمكنك تجربة الشيفرة وإخباري بالنتيجة

أسامة زيادة · 16 مارس 2022

وعليكم السلام ورحمة الله وبركاته

كما ترى أنت هنا قمت بإعطاء كل عنصر من العناصر عرض 25% من إجمالي العرض للعنصر father . وأنت تقوم بزيادة المسافة وتعتبر هذه المسافة زيادة عن الحجم المعطى للعنصر father التي تساوي 800px ، لذلك تظهر بالأسفل وتظهر المشكلة لديك .

.main{
    background-color: rgb(202, 202, 202);
    font-weight: 300 ;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 5px ;
    text-align: center ;
    height: 100px ;
    font-size: 50px ; 
    float: left ;
    margin-top: 10px ;
    width: 25%;  //هنا
}

قم بإلغاء الخاصية width أو تخفيض القيمة المعطاة لها وبعدها قم بعمل الخاصية padding وسوف تظهر لديك مسافات داخلية بين العناصر .

padding: 20px;

Bassam Ahmed3 · 16 مارس 2022

يمكنك حل تلك المشكلة عن طريق تعديل بسيط في الـ class المُسمى main مثل الكود التالي :

.main{
    background-color: rgb(202, 202, 202);
    font-weight: 300 ;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 5px ;
    text-align: center ;
    height: 100px ;
    font-size: 50px ; 
    float: left ;
    margin-top: 10px ;
    width: 24%;
    margin-left: 5px;
}

التعديل الذي تم : تقليل العرض width بمقدار درجة واحده فقط ليتناسب مع العرض الإجمالي

ثم عمل margin-left بمقدار 5px مع تثبيت باقي الكود الخاص بك

تم التعديل في 16 مارس 2022 بواسطة bassam_ahmed_python
رفع المرفق التوضيحي لنتيجة تعديل الكود

Mohammed Hhhh · 16 مارس 2022

قمت بعمل التعليمات التي اعطيتني اياها و للأسف وما زالات المشكلة موجودة

ارجو ان ترسل لي الكود كاملا لكي اصل الى نفس النتيجه الموجودة في الصورة التالية :

وشكرا لكم على المجهود >>

أسامة زيادة · 16 مارس 2022

هل يمكنك إرفاق الشيفرة البرمجية الخاصة بالصورة ؟

Mohammed Hhhh · 16 مارس 2022

بتاريخ 3 دقائق مضت قال أسامة زيادة:

هل يمكنك إرفاق الشيفرة البرمجية الخاصة بالصورة ؟

هذا تمرين وجدته على النت و لم يكن موجود معه الحل لذلك للأسف لا استطيع ارسال الشيفرة البرمجية

Moayad Abdo · 14 مارس

عمل مسافة بين عناصر ال css

السؤال

Mohammed Hhhh

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

Recommended Posts

أسامة زيادة

أسامة زيادة

Bassam Ahmed3

Mohammed Hhhh

أسامة زيادة

Mohammed Hhhh

Moayad Abdo

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية