Hitskin.com
الرئيسية
المجله
أحدث الصور
التسجيل
دخول
من طرف في الدرس الماضي تعرفنا على نموذج الصندوق، في هذ الدرس سنلقي نظرة على كيفية تغيير شكل العناصر بتغيير إعدادات خاصية margin وpadding.
تعديل خاصية margin لعنصر ما
كل عنصر له أربع جوانب، اليمين right، اليسار left، الاعلى top، الأسفل bottom، الخاصية margin تتحكم ببعد كل جانب من جوانب العنصر عن العنصر المحاذي له، أو إطار الصفحة، أنظر إلى الرسم التوضيحي في [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] للمزيد من التوضيح.
في المثال الأول لنلقي نظرة على كيفية تحديد الحاشية "margin" للصفحة نفسها أي للعنصر ، الرسم أدناه يوضح كيف نريد للحاشية أن تكون في الصفحة.
في ملف CSS سنكتب التالي:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
أو يمكننا تجميع كل هذه السطور في سطر واحد أنيق:
body {
margin: 100px 40px 10px 70px;
}
يمكنك تحديد الحاشية بنفس الطريقة لمعظم العناصر، فمثلاً يمكنك تحديد الحاشية لكل الفقرات النصية للعنصر
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;
}
اطلب اى شرح وان شاء الله هنجيبهولك
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
تعديل خاصية margin لعنصر ما
كل عنصر له أربع جوانب، اليمين right، اليسار left، الاعلى top، الأسفل bottom، الخاصية margin تتحكم ببعد كل جانب من جوانب العنصر عن العنصر المحاذي له، أو إطار الصفحة، أنظر إلى الرسم التوضيحي في [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] للمزيد من التوضيح.
في المثال الأول لنلقي نظرة على كيفية تحديد الحاشية "margin" للصفحة نفسها أي للعنصر ، الرسم أدناه يوضح كيف نريد للحاشية أن تكون في الصفحة.
في ملف CSS سنكتب التالي:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
أو يمكننا تجميع كل هذه السطور في سطر واحد أنيق:
body {
margin: 100px 40px 10px 70px;
}
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
يمكنك تحديد الحاشية بنفس الطريقة لمعظم العناصر، فمثلاً يمكنك تحديد الحاشية لكل الفقرات النصية للعنصر
:
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;
}
- [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
اطلب اى شرح وان شاء الله هنجيبهولك
