الدرس 30

الإطار الخارجي outline والفرق بينه وبين border

المعنى	Stand For	Name
إطار حول العنصر من غير ما يحجز مساحة في ترتيب الصفحة		outline
المسافة بين الإطار وحد العنصر		outline-offset

ال outline بتظهر كإطار حوالين العنصر لكنها مختلفة عن border لأنها مش بتزود حجمه في ترتيب الصفحة

<div class="box">Border And Outline</div>

.box {
  width: 240px;
  padding: 20px;
  margin: 30px;
  border: 3px solid blue;
  outline: 3px solid orange;
  outline-offset: 6px;
}

الحد الأزرق حوالين العنصر والإطار البرتقالي بعيد عنه 6 بكسل ال margin هنا بتدي مساحة حواليه علشان تشوف الإطار بوضوح

ال border بتدخل في حساب حجم العنصر
ال outline مش بتحجز مساحة زيادة وممكن ترسم فوق مساحة عنصر قريب
تقدر تغير ناحية واحدة من border لكن outline إطار كامل من غير خواص منفصلة لكل ناحية

outline-width: 3px;
outline-style: dashed;
outline-color: orange;

بدل سطر outline بالأكواد دي لو عاوز تتحكم في الأجزاء بشكل منفصل

جرب زرار عادي واضغط Tab علشان توصله

<button type="button">Save Changes</button>

المتصفح بيظهر علامة تركيز غالبا في شكل إطار علشان تعرف انت واقف على أنهي عنصر متشيلهاش لمجرد إخفاء شكلها لأنها بتساعد اللي بيستخدم لوحة المفاتيح

غير outline-offset بين 0 و 10px ولاحظ إن مكان العنصر وحجمه في الصفحة مبيتغيروش بسبب الإطار

آخر تعديل للدرس: 13/10/2026