Padding

-

الهوامش : تطبق داخل Element


شوف الصورة التالية :



شوف padding  الي هي المسافة  حول content 

تمام خلونا نعمل مثال حتى نفهم الموضوع بشكل أفضل:
نبدأ بإنشاء ملف HTML باسم  padding  وبعدها نضيف الكود التالي: 
<!DOCTYPE html>
<html>
    <style>
        div{
            border: 2px solid gray;
             border-radius: 5px / 8px;
             font-size: larger;
             padding: 70px;
        }
    </style>
<body>
   <div> padding تطبيق </div>            
</body>
</html>

شغل الصفحة ونشوف النتيجة (الصورة)
في المثال السابق حددنا padding تساوي 70 يعني ان مكونات Div سيتم إضافة مسافة لها بقيمة 70px وسيطبق على  جميع الاتجاهات(padding-top, padding-bottom, padding-right, padding-left).
تمام لو جربنا نعدل على الكود واضافة padding (الكود):
<!DOCTYPE html>
<html>
    <style>
        div{
            border: 2px solid gray;
             border-radius: 5px / 8px;
             font-size: larger;
             padding: 70px;
             padding: 70px;
        }
    </style>
<body>
   <div> padding تطبيق </div>            
</body>
</html>
شغل التطبيق وشوف النتيجة:

تمام طريقة الكتابة بتكون بالشكل: 
padding:<Value>;

  Value هنا يمكن ان تكون 
 1parameter او 2parameter  او parameter3 او parameter4
تمام نشوف كيف ممكن نطبق هذا الكلام

1parameter
padding: all;

مثال :
padding: 70px; 

في حال تطبيق قيمة واحدة ، فهذا يعني تطبيق هذه القيمة المدخلة على الجوانب الأربعة (top, right, bottom, left).

2parameter
padding: top_bottom left_right;

مثال :

div { padding: 0 auto; }

في حال تطبيق قيمتين ، سيتم تطبيق القيمة الأولى على الجزء العلوي والسفلي. وسيتم تطبيق القيمة الثانية على الجانبين الأيسر والأيمن.

parameter3
padding: top right_left bottom;
 في حال تطبيق ثلاث قيم ، سيتم تطبيق القيمة الأولى في الجزء العلوي. وسيتم تطبيق القيمة الثانية على الجانبين الأيمن والأيسر. ويتم تطبيق القيمة الثالثة على الجزء السفلي.
مثال :
div { padding: 2px 4px 6px; }

parameter4
padding: top right bottom left;

مثال
في حال توفير أربع قيم، سيتم تطبيق القيمة الأولى على الجزء العلوي. وسيتم تطبيق القيمة الثانية على الجانب الأيمن. وسيتم تطبيق القيمة الثالثة على الجزء السفلي. وسيتم تطبيق القيمة الرابعة على الجانب الايسر.
div { padding: 5px 10px 12px 8px; }

يمكن تطبيق قيم مختلفة على Border-color والتي قد تكون واحد من : 

 
واكيد يمكن دمج القيم inherit, percentage, auto, and fixed مع بعض في خاصية. 

امثلة :
Div.One {
  border-style: solid;
  border-width: 5px; /* 5px top and bottom, Left and Right */
  border-color: #FF0000; /* #FF0000 color for top and bottom, Left and Right */
 padding: 10px;

}
في هذا المثال ، طبقنا لون واحد #FF0000 ، والتي سوف تطبق على جميع الجوانب الأربعة لDiv.

Div.two {
  border-style: solid;
  border-width: 20px medium; /* 20px top and bottom, medium for left ang right */
  border-color: #FF0000 black; /* #FF0000 color for top and bottom, black  for Left and Right */
 padding: 10px 10px;
}
في هذا المثال، طبقنا لونين. سيتم تطبيق اللون الأول #FF0000 على الجزء العلوي والسفلي من Div. سيتم تطبيق اللون الثاني black على الجانبين الأيسر والأيمن من Div.


Div.three {
  border-style: solid;
  border-width: 25px thin 4px ; /* 25px top, thin for right and left, 4px for bottom */
  border-color: #FF0000 black yellow; /* #FF0000 color for top, black for  right and left, yellow for bottom */
padding: 10px 10px 5em;
}
Div.four {
  border-style: solid;
  border-width: 25px thin 4px meduim ; /* 25px top, thin for right 4px for bottom, medium for left */
  border-color: rgb(0,0,0) #FF0000 black yellow; /* rgb(0,0,0)  for top, #FF0000 for  right ,black for bottom ,yellow for left */
padding: 10px 10px 5em 10px;
}
في هذا المثال طبقنا أربع قيم. حيث سيتم تطبيق اللون الأول rgb(0,0,0)  على الجزء العلوي من Div. و,سيتم تطبيق اللون الثاني #FF0000 على الجانب الأيمن . وسيتم تطبيق اللون الثالث black على الجزء السفلي. واخيرا تطبيق اللون الرابط yellow على الجانب الأيسر.

امثلة لاستخدام النسبة المئوية:
Div.One {
  border-style: solid;
  border-width: 5px; /* 5px top and bottom, Left and Right */
  border-color: #FF0000; /* #FF0000 color for top and bottom, Left and Right */
 padding: 10%;

}
Div.two {
  border-style: solid;
  border-width: 20px medium; /* 20px top and bottom, medium for left ang right */
  border-color: #FF0000 black; /* #FF0000 color for top and bottom, black  for Left and Right */
 padding: 10% 10%;
}
في هذا المثال، طبقنا لونين. سيتم تطبيق اللون الأول #FF0000 على الجزء العلوي والسفلي من Div. سيتم تطبيق اللون الثاني black على الجانبين الأيسر والأيمن من Div.


Div.three {
  border-style: solid;
  border-width: 25px thin 4px ; /* 25px top, thin for right and left, 4px for bottom */
  border-color: #FF0000 black yellow; /* #FF0000 color for top, black for  right and left, yellow for bottom */
padding: 10% 10% 5%;
}
Div.four {
  border-style: solid;
  border-width: 25px thin 4px meduim ; /* 25px top, thin for right 4px for bottom, medium for left */
  border-color: rgb(0,0,0) #FF0000 black yellow; /* rgb(0,0,0)  for top, #FF0000 for  right ,black for bottom ,yellow for left */
padding: 10% 10v 5% 10%;
}