الحشو
الحشو
الحشو درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 1 من أصل 1. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 1 دروس في المجموع.
مقدمة
مرحبًا،
مرحبًا بكم في درس CSS Padding.
تُستخدم Padding لإنشاء مساحة داخل حدود عنصر HTML الخاص بنا.
وكما هو الحال مع margin، يمكننا إضافة padding موزعة على أربعة اتجاهات إلى العنصر.
النوع النسبي المئوي
في المثال السابق، عيّنا قيمة padding ثابتة من نوع px. وكما هو الحال مع margin، يمكننا تعيين قيمة من النوع النسبي المئوي.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: lightblue;
padding-top:10%;
padding-right: 10%;
padding-left: 10%;
padding-bottom:10%;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box">
We assign percentage type
padding to this div element.
</div>
</body>
</html>
لتقصير التعليمات البرمجية
وكما هو الحال مع margin، يمكن تعريف padding في سطر واحد باستخدام صيغة الاختصار.
يمكن إضافة قيم padding الخاصة بـ الأعلى، واليمين، والأسفل، واليسار مع فصلها بمسافات، بالترتيب.
اطّلع على التعليمات البرمجية النموذجية، وستلاحظ أنها تشبه إلى حد كبير صيغة margin.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 1px solid black;
padding: 20px 10px 25px 10px;
background-color: powderblue;
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet,
consectetur
</div>
</body>
</html>تهانينا
تهانينا 🎉
في هذا القسم، تعلمنا CSS Margins.
في القسم التالي، سنتعلم Color and Background.
الأسئلة الشائعة
هل درس «الحشو» مجاني؟
نعم — نص درس «الحشو» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 1 دروس في المجموع.
ماذا ستتعلم في «الحشو»؟
الحشو تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟
لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 1.
كم من الوقت يستغرق درس «الحشو»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟
نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.