CSS:
Padding and difference between margin and padding
شرحنا قبل الثريد هذا: المارجن وجاء إقبال جميل ولقيت الناس مهتمه حقاً، لذلك تحمست أكمل نشر المعرفه للجميع!❤️
( الثريد هذا تكملة لثريد المارجن وبتكلم عن البادنق واختلافه مع المارجن ) :
-- ⬇️ --
Padding and difference between margin and padding
شرحنا قبل الثريد هذا: المارجن وجاء إقبال جميل ولقيت الناس مهتمه حقاً، لذلك تحمست أكمل نشر المعرفه للجميع!❤️
( الثريد هذا تكملة لثريد المارجن وبتكلم عن البادنق واختلافه مع المارجن ) :
-- ⬇️ --
طيب تسألني وش يعني بادنق؟
لو نرجع للمعنى لكلمة " Padding " باللغة العربية بنلاقيه معناه " حشوة" لكن أنا ابيك تناديه بادنق وتفهم فكرته
وهو المسافة الداخلية ( ركزز: المسافة الداخلية ، لكن الخارجية للمارجن)
-- ⬇️ --
لو نرجع للمعنى لكلمة " Padding " باللغة العربية بنلاقيه معناه " حشوة" لكن أنا ابيك تناديه بادنق وتفهم فكرته
وهو المسافة الداخلية ( ركزز: المسافة الداخلية ، لكن الخارجية للمارجن)
-- ⬇️ --
طيب، ركز بالصورة وهذي اسمها box model
الي يحيط الشيء وهي المسافة الخارجية هو الـ مارجن
والي داخل المارجن الحواف والي هو البوردر
لكن البادنق الداخلي والي يحيط content وبالصورة الثانية بتلاحظ ايضاً فكرتهم وإختلاهم عن بعض، بكل اختصار المارجن " خارج " - لكن البادنق " داخل "
- ⬇️ -
الي يحيط الشيء وهي المسافة الخارجية هو الـ مارجن
والي داخل المارجن الحواف والي هو البوردر
لكن البادنق الداخلي والي يحيط content وبالصورة الثانية بتلاحظ ايضاً فكرتهم وإختلاهم عن بعض، بكل اختصار المارجن " خارج " - لكن البادنق " داخل "
- ⬇️ -
طيب! الحين فهمنا فكرة البادنق!، وش هو الساينتكس أو طريقة الكود
مثل ما ذكرنا في ثريد المارجن يمديك تكتب الكود بطريقتين - وحدة مختصرة - ووحدة لا
وهذا الشيء نفسه في البادنق
مثل ما ذكرنا في ثريد المارجن يمديك تكتب الكود بطريقتين - وحدة مختصرة - ووحدة لا
وهذا الشيء نفسه في البادنق
وذكرنا ايضا بكلمة السر، وهي " فوق يسار تحت يمين" ، طبعاً سميتها كلمة سر كذا من بالي ههههههه، لكن سميها باللي تبي هذي طريقة وهي تدل على الترتيب الخاص بالإتجاهات في كلا من المارجن والبادنق
وتساعدك بفهمه
لازم تشوف التغريدة هذي قبل ما تكمل:
وتساعدك بفهمه
لازم تشوف التغريدة هذي قبل ما تكمل:
وايضاً فيه طريقة أخرى من الأخ فارس @fari15551
وهي إنك تحفظ الترتيب "TRBL"
TRBL = Top,Right, Bottom,Left
وهي إنك تحفظ الترتيب "TRBL"
TRBL = Top,Right, Bottom,Left
امثلة:
سؤال: عندك div عنده كلاس بإسم box إجعل البادنق الخاص بالمحتوى 100 بكسل من فوق و50 بكسل من اليسار و10 بكسل من تحت
فكر وحاول تجيبها وبعدها شوف الحل ،
الحل⬇️
سؤال: عندك div عنده كلاس بإسم box إجعل البادنق الخاص بالمحتوى 100 بكسل من فوق و50 بكسل من اليسار و10 بكسل من تحت
فكر وحاول تجيبها وبعدها شوف الحل ،
الحل⬇️
والساينتكس الخاص بالpadding:
padding-top -> الإتجاه: فوق
padding-right -> الإتجاه: يمين
padding-bottom -> الإتجاه: تحت
padding-left -> الإتجاه: يسار
padding-top -> الإتجاه: فوق
padding-right -> الإتجاه: يمين
padding-bottom -> الإتجاه: تحت
padding-left -> الإتجاه: يسار
الطريقة المختصرة:
padding: top left bottom right;
جدير بالذكر: إذا حطيت قيمة واحدة فقط مثل padding:50;
بتصير لكل الإتجاهات نفس القيمة
وبنفس الشيء مع المارجن، وهذا الشيء ماذكرته بثريد المارجن وأعتذر على ذلك!
padding: top left bottom right;
جدير بالذكر: إذا حطيت قيمة واحدة فقط مثل padding:50;
بتصير لكل الإتجاهات نفس القيمة
وبنفس الشيء مع المارجن، وهذا الشيء ماذكرته بثريد المارجن وأعتذر على ذلك!
الطريقة الغير مختصرة:
.box{
padding-top: 100px;
padding-left: 50px;
padding-bottom:10px;
}
الطريقة المختصرة:
.box{
padding: 100px 50px 10px 0px;
}
.box{
padding-top: 100px;
padding-left: 50px;
padding-bottom:10px;
}
الطريقة المختصرة:
.box{
padding: 100px 50px 10px 0px;
}
وبما إنك فهمت على الاقل شيء أساسي ويفترض إنك فهمت الفرق بين المارجن والبادنق، ,والأن بختبرك بسؤالين
⬇️
⬇️
1:
إكتشف الخطأ ؟
padding-top: 12px 12px 34px 34px;
إكتشف الخطأ ؟
padding-top: 12px 12px 34px 34px;
2:
أنشئ div بكلاس box
واضف له <p> بأي content تبيه مثلاً "Hello"
وأضف له مارجن لكل الإتجاهات ب 30 بكسل ولكن إتجاه اليمين 700 بكسل
وأضف لك بادنق 10 بكسل لكل الإتجاهات
وأضف لك حواف " border " من نوع solid و 2 بكسل
سويها وورينا النتيجة! ( ويمديك تورينا إبداعك بأكثر من طريقة )
أنشئ div بكلاس box
واضف له <p> بأي content تبيه مثلاً "Hello"
وأضف له مارجن لكل الإتجاهات ب 30 بكسل ولكن إتجاه اليمين 700 بكسل
وأضف لك بادنق 10 بكسل لكل الإتجاهات
وأضف لك حواف " border " من نوع solid و 2 بكسل
سويها وورينا النتيجة! ( ويمديك تورينا إبداعك بأكثر من طريقة )
3:
حاول تسوي مثل الصورة بإستخدام margin و padding
حاول تسوي مثل الصورة بإستخدام margin و padding
اذا حاب تتعمق اكثر:
هنا الكنز: w3schools.com
الثريد من طلب الاسطورة: @x7mii
[ @PrograminLovers @sultan_7raag ]
هنا الكنز: w3schools.com
الثريد من طلب الاسطورة: @x7mii
[ @PrograminLovers @sultan_7raag ]
جاري تحميل الاقتراحات...