أولاً: الإطارات (Borders)
الإطار يحيط بأي عنصر في الصفحة.
الصيغة الأساسية:
selector {
border: 2px solid black;
}
شرح الخصائص:
- السُمك (Width): 1px, 2px, ...
- النوع (Style): solid, dashed, dotted, double, none
- اللون (Color): اسم لون، كود HEX، RGB...
مثال:
div {
border: 3px dashed blue;
}
ثانياً: الحشوة (Padding)
هي المسافة بين محتوى العنصر وحدود الإطار.
p {
padding: 20px;
}
تحديد الجوانب بشكل منفصل:
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
أو بشكل مختصر:
padding: 10px 15px 10px 15px; /* أعلى، يمين، أسفل، يسار */
ثالثاً: الهوامش (Margin)
هي المسافة بين العنصر والعناصر الأخرى حوله.
h1 {
margin: 30px;
}
تحديد الجوانب:
margin-top: 20px;
margin-bottom: 10px;
أو بشكل مختصر مثل padding.
ملاحظات مهمة:
- Margin تدفع العنصر للخارج
- Padding توسّع من داخل العنصر
- استخدمها معًا لضبط التصميم بدقة
مثال عملي:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 2px solid #333;
padding: 20px;
margin: 30px;
background-color: #f9f9f9;
}
h2 {
margin-bottom: 10px;
}
p {
padding: 10px;
border: 1px dotted gray;
}
</style>
</head>
<body>
<div class="box">
<h2>عنوان داخل صندوق</h2>
<p>هذه فقرة داخل عنصر يحتوي على إطار، حشوة، وهامش.</p>
</div>
</body>
</html>
الواجب العملي:
- أنشئ صفحة تحتوي على صندوق فيه عنوان وفقرة.
- أضف:
- إطار ملون للصندوق.
- حشوة مناسبة للنص.
- هامش يبعد الصندوق عن العناصر الأخرى.