المسافات الخارجية في CSS

حاشية هذا العنصر هي 70px.

جرب بنفسك

المسافات الخارجية في CSS

CSS حاشية تستخدم الخاصية لإنشاء مساحة حول العنصر حول الحواف المحددة.

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

حاشية - جانب فردي

CSS يملك خصائص لتحديد الحاشية لأي جانب من العنصر:

  • حاشية العلوية
  • حاشية اليمين
  • حاشية السفلية
  • حاشية اليسرى

يمكن تعيين جميع خصائص الحاشية بالقيم التالية:

  • auto - تحديد أن الحاشية سيتم حسابها من قبل المتصفح
  • مقياس - تحديد الحاشية بمقياس px،pt،cm وما إلى ذلك
  • % - تحديد الحاشية كنسبة من عرض العنصر المضمون
  • توريث - تحديد أن الحاشية يجب أن تأتي من العنصر الأم

نصيحة:يتيح القيم السلبية.

مثال

ضبط الحواف الخارجية لأربعة جوانب من علامة <p> بشكل مختلف:

p {
  حاشية العلوية: 100px;
  حاشية السفلية: 100px;
  حاشية اليمين: 150px;
  حاشية اليسرى: 80px;
}

جرب بنفسك

حاشية - خاصية اختصار

للحد من كود، يمكنك تحديد جميع خصائص الحواف الخارجية في خاصية واحدة.

حاشية الخاصية هي اختصار لخصائص الحواف الخارجية التالية:

  • حاشية العلوية
  • حاشية اليمين
  • حاشية السفلية
  • حاشية اليسرى

المبدأ يعمل كما يلي:

إذا حاشية تملك الخاصية أربع قيم:

  • حاشية: 25px 50px 75px 100px;
    • الحاشية العلوية هي 25px
    • الحاشية اليمنى هي 50px
    • الحاشية السفلية هي 75px
    • الحاشية اليسرى هي 100px

مثال

تم تعيين أربع قيم الخاصية اختصار الحاشية:

p {
  حاشية: 25px 50px 75px 100px;
}

جرب بنفسك

إذا حاشية تم تعيين ثلاث قيم الخاصية:

  • حاشية: 25px 50px 75px;
    • الحاشية العلوية هي 25px
    • الحاشية اليمنى واليسرى هي 50px
    • الحاشية السفلية هي 75px

مثال

استخدام خاصية اختصار الحاشية لتعيين ثلاث قيم:

p {
  حاشية: 25px 50px 75px;
}

جرب بنفسك

إذا حاشية تم تعيين قيمتين الخاصية:

  • حاشية: 25px 50px;
    • الحاشية العلوية والسفلية هي 25px
    • الحاشية اليمنى واليسرى هي 50px

مثال

استخدام خاصية اختصار الحاشية لتعيين قيمتين:

p {
  حاشية: 25px 50px;
}

جرب بنفسك

إذا حاشية تم تعيين قيمة الخاصية:

  • حاشية: 25px;
    • جميع الحواف الخارجية هي 25px

مثال

استخدام خاصية اختصار الحاشية لتعيين قيمة:

p {
  حاشية: 25px;
}

جرب بنفسك

قيمة auto

يمكنك تعيين margin الخاصية autoلجعل العنصر في وسط صندوقه.

ثم، سيأخذ العنصر المساحة المحددة، وسيوزع الباقي في الحواف اليسرى واليمنى.

مثال

استخدام margin: auto:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

جرب بنفسك

قيمة inherit

في هذا المثال، الهوامش الخارجية للعنصر <p class="ex1"> تورث من العنصر الأم <div>:

مثال

استخدام قيمة inherit:

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
  margin-left: inherit;
}

جرب بنفسك

قراءة متابعة

كتب إضافية:نموذج الصندوق: الهوامش الخارجية CSS