CSS Margins

-

في هذه الخاصية تُستخدم الهوامش لإنشاء مساحة حول elements  .

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

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



شوف Margins الي هي المسافة بين div.contenet  وبين الحد الأعلى ل div.container

تمام خلونا نعمل مثال حتى نفهم الموضوع بشكل أفضل:
نبدأ بإنشاء ملف HTML باسم  Margins وبعدها نضيف الكود التالي: 

<!DOCTYPE html>
<html>
    <style>
        div{
            border: 2px solid gray;
             border-radius: 5px / 8px;
             font-size: larger;
             margin: 70px;
        }
    </style>
<body>
   <div> Margins تطبيق </div>            
</body>
</html>

شغل الصفحة ونشوف النتيجة (الصورة)
في المثال السابق حددنا margin تساوي 70 يعني ان element الي بيطبق عليه هذا هوامش من جميع الاتجاهات(margin-top, margin-bottom, margin-right, margin-left) بمقدار القيمة المدخلة.
 
تمام طريقة الكتابة بتكون بالشكل: 
margin:<Value>;

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

1parameter
margin: all;
مثال :
margin: 70px; 
في حال تطبيق قيمة واحدة ، فهذا يعني تطبيق هذه القيمة المدخلة على الجوانب الأربعة (top, right, bottom, left).

2parameter
margin: top_bottom left_right;
مثال :

div { margin: 0 auto; }

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

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

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

div { margin: 5px 10px 12px 8px; }

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

القيمة
الوصف
fixed

قيمة ثابتة تكون ب px, em

امثلة

div { margin: 5px; }

div { margin: 4em 5px; }

div { margin: 2px 5px 10px; }

div { margin: 4px 5px 2px 3px; }

percentage

قيمة بنسبة 

امثلة

div { margin: 8%; }

div { margin: 4% 5%; }

div { margin: 2% 5% 8%; }

div { margin: 4% 5% 2% 3%; }

fixed and percentage 

(in combination)

يمكن تطبيق قيمة ثابتة بالإضافة الى نسبة


div { margin: 4% 5px; }

div { margin: 2em 5% 8px; }

div { margin: 4px 5em 2% 3px; }

auto

تستخدم لتوسيط الكتل blocks

امثلة 

div { margin: 0 auto; }

div { margin: 4% auto; }

inherit

سيرث العنصر الهامش من parent element

مثال

div { margin: inherit; }

 واكيد يمكن دمج القيم thin, medium, thick, and fixed مع بعض في خاصية CSS border-color.
راجع أيضًا خصائص الحدود ولون الحدود ونمط الحدود.

امثلة :
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 */
 margin: 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 */
 margin: 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 */
margin: 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 */
margin: 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 */
 margin: 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 */
 margin: 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 */
margin: 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 */
margin: 10% 10v 5% 10%;
}