الدرس السادس-الهوامش

الهوامش _margin and padding  :

Margin :

هي المسافات حول العنصر او النص  خارج الحدود border  حسب الاتجاهات يسار- يمين - اسفل -اعلى

{
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

طرق كتابة الـ margin :

{
  margin: 25px 50px 75px 100px;
}

 

ثمثل كل الاتجاهات .

 

{
  margin: 25px 50px;
}

 

If the margin property has two values:

 

اذا كان الـmargin  يحمل قيمتين .

اذا كانت  خصائص  magin  تتكون من قيمتين

margin: 25px 50px;

  • اعلي واسفل تمثل القيمة 25
  • يمين ويسار تمثل القيمة 50

 

اما اذا كانت قيمة الـmargin    قيمة واحدة فهذه القيمة تمثل الأربع قيم .

الخاصية auto  يتم اخذ مسافات تلقائية للأبعاد  .

 

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

 

الان نتحدث عن الـPadding :

 

هو المسافة الداخلية للعنصر بين حدود العنصر والمحتوي وطريقة كتابته وخصائصه نفس طريقة الـmargin  .

 

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}