CSS · الدرس ٢ من ٤

اترك مساحة حول المحتوى

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

جرّب الآن

غيّر padding من 12px إلى 24px، ثم جرّب تغيير سُمك الحدّ من 1px إلى 3px.

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

اختر صورة من جهازك

تبقى الصورة في متصفحك ولا تُرفع إلى الموقع. اخترها، ثم استخدم اسم ملفها عند إضافة الصورة إلى كودك.

        CSS · style.cssmain {
  padding: 12px;
  margin: 8px;
  border: 1px solid seagreen;
}
        عدّل HTML لمشروعك
            HTML · index.html<main>
  <h1>مرحباً، أنا سارة</h1>
  <p>هذه صفحتي الأولى.</p>
  <ul>
    <li>القراءة</li>
    <li>الرسم</li>
    <li>التعلّم</li>
  </ul>
</main>
            
        
    

صفحتك

تستخدم الفحوصات كودك الحالي. جرّب الصفحة بنفسك أيضاً.

هل تميّز المساحة داخل الحدّ عن المساحة خارجه؟ انتقل إلى ترتيب القائمة.

التالي: ترتيب العناصر

أحتاج مساعدة

غيّر قيمة واحدة في كل مرة. px وحدة لقياس المسافة على الشاشة. اكتبها بعد العدد دون مسافة.

شرح إضافي

احفظ الصفحة على جهازك

نزّل ملف HTML

إذا لم يبدأ التنزيل، انسخ الكود الكامل أدناه إلى ملف نصّي باسم index.html واحفظه بترميز UTF-8.

الكود الكامل للحفظ

جرّب الآن

صفحتك

ملاحظات على عملك