الحاشية والحشو بتغيير إعدادات خاصية margin وpadding

الفارس · 09-04-2019, 10:35 AM

الحاشية والحشو بتغيير إعدادات خاصية margin وpadding
في الدرس الماضي تعرفنا على نموذج الصندوق، في هذ الدرس سنلقي نظرة على كيفية تغيير شكل العناصر بتغيير إعدادات خاصية margin وpadding.

تعديل خاصية margin لعنصر ما
تعديل خاصية padding لعنصر ما
تعديل خاصية margin لعنصر ما
كل عنصر له أربع جوانب، اليمين right، اليسار left، الاعلى top، الأسفل bottom، الخاصية margin تتحكم ببعد كل جانب من جوانب العنصر عن العنصر المحاذي له، أو إطار الصفحة، أنظر إلى الرسم التوضيحي في الدرس 9 للمزيد من التوضيح.

في المثال الأول لنلقي نظرة على كيفية تحديد الحاشية "margin" للصفحة نفسها أي للعنصر <body>، الرسم أدناه يوضح كيف نريد للحاشية أن تكون في الصفحة.

Examples of margins

في ملف CSS سنكتب التالي:

body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}

أو يمكننا تجميع كل هذه السطور في سطر واحد أنيق:

body {
margin: 100px 40px 10px 70px;
}

شاهد المثال
يمكنك تحديد الحاشية بنفس الطريقة لمعظم العناصر، فمثلاً يمكنك تحديد الحاشية لكل الفقرات النصية للعنصر <p>:

body {
margin: 100px 40px 10px 70px;
}

p {
margin: 5px 50px 5px 50px;
}

شاهد المثال
تعديل خاصية padding لعنصر ما
الحشو يمكن التعبير عنه بأنه "ما في داخل العنصر نفسه" والحشو لا يؤثر في المسافية بين العنصر والآخر، بل يحدد المسافة في العنصر نفسه بين محتويات العنصر والإطار.

استخدام الحشو "padding" يمكن توضيحه بمثال بسيط حيث كل العناوين لها ألوان خلفية:

h1 {
background: yellow;
}

h2 {
background: orange;
}

شاهد المثال
بتحديد الحشو لكل عنوان يمكن تغيير حجم العنصر الداخلي الذي يحيط بالعنوان من كل جهة:

h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}

h2 {
background: orange;
padding-left:120px;
}

شاهد المثال
ملخص
أنت في طريقك لأن تتقن استخدام نموذج الصندوق في CSS، في الدرس التالي سنلقي نظرة أقرب على الإطارات وكيف نحدد لها ألواناً مختلفة وكيف نستخدمها لنحدد أشكال العناصر.

المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress

09-04-2019, 10:35 AM	#1
الفارس تاريخ التسجيل: Feb 2019 المشاركات: 1,010 التقييم: 10	الفارس تاريخ التسجيل: Feb 2019 المشاركات: 1,010 التقييم: 10 الحاشية والحشو بتغيير إعدادات خاصية margin وpadding الحاشية والحشو بتغيير إعدادات خاصية margin وpadding الحاشية والحشو بتغيير إعدادات خاصية margin وpadding في الدرس الماضي تعرفنا على نموذج الصندوق، في هذ الدرس سنلقي نظرة على كيفية تغيير شكل العناصر بتغيير إعدادات خاصية margin وpadding. تعديل خاصية margin لعنصر ما تعديل خاصية padding لعنصر ما تعديل خاصية margin لعنصر ما كل عنصر له أربع جوانب، اليمين right، اليسار left، الاعلى top، الأسفل bottom، الخاصية margin تتحكم ببعد كل جانب من جوانب العنصر عن العنصر المحاذي له، أو إطار الصفحة، أنظر إلى الرسم التوضيحي في الدرس 9 للمزيد من التوضيح. في المثال الأول لنلقي نظرة على كيفية تحديد الحاشية "margin" للصفحة نفسها أي للعنصر <body>، الرسم أدناه يوضح كيف نريد للحاشية أن تكون في الصفحة. Examples of margins في ملف CSS سنكتب التالي: body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; } أو يمكننا تجميع كل هذه السطور في سطر واحد أنيق: body { margin: 100px 40px 10px 70px; } شاهد المثال يمكنك تحديد الحاشية بنفس الطريقة لمعظم العناصر، فمثلاً يمكنك تحديد الحاشية لكل الفقرات النصية للعنصر <p>: body { margin: 100px 40px 10px 70px; } p { margin: 5px 50px 5px 50px; } شاهد المثال تعديل خاصية padding لعنصر ما الحشو يمكن التعبير عنه بأنه "ما في داخل العنصر نفسه" والحشو لا يؤثر في المسافية بين العنصر والآخر، بل يحدد المسافة في العنصر نفسه بين محتويات العنصر والإطار. استخدام الحشو "padding" يمكن توضيحه بمثال بسيط حيث كل العناوين لها ألوان خلفية: h1 { background: yellow; } h2 { background: orange; } شاهد المثال بتحديد الحشو لكل عنوان يمكن تغيير حجم العنصر الداخلي الذي يحيط بالعنوان من كل جهة: h1 { background: yellow; padding: 20px 20px 20px 80px; } h2 { background: orange; padding-left:120px; } شاهد المثال ملخص أنت في طريقك لأن تتقن استخدام نموذج الصندوق في CSS، في الدرس التالي سنلقي نظرة أقرب على الإطارات وكيف نحدد لها ألواناً مختلفة وكيف نستخدمها لنحدد أشكال العناصر. المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress
	اقتباس

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
تحريك وانتقال العناصر في css3 (الانتقال)	القيصر	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	1	28-07-2019 07:55 PM
ضبط إعدادات الشحن (Shipping) لمتجرك الإلكتروني على منصة WooCommerce	مهرة النجدية	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	1	22-07-2019 06:58 PM
ضبط إعدادات الحسابات، البريد الإلكتروني، والواجهة البرمجية لمتجرك الإلكتروني على منصة	مهرة النجدية	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	1	22-07-2019 06:47 PM
ما هي اعدادات CloudFlare	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	07-04-2019 06:55 PM
الخاصية The property (خاصية الكائن object attribute)	سالجان	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	28-02-2019 06:34 PM

اسم العضو		حفظ البيانات؟
كلمة المرور

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)