هوامش CSS
تُستخدم الهوامش لإنشاء مساحة حول العناصر ، خارج أي حدود محددة.
هوامش CSS
تُستخدم خصائص CSS marginلإنشاء مساحة حول العناصر ، خارج أي حدود محددة.
مع CSS ، لديك سيطرة كاملة على الهوامش. هناك خصائص لتعيين الهامش لكل جانب من عنصر (أعلى ، يمين ، أسفل ، يسار).
الهامش - جوانب فردية
يحتوي CSS على خصائص لتحديد الهامش لكل جانب من عنصر:
margin-topmargin-rightmargin-bottommargin-left
يمكن أن تحتوي جميع خصائص الهامش على القيم التالية:
- تلقائي - يقوم المتصفح بحساب الهامش
- length - يحدد الهامش بالبكسل ، والنقطة ، والسنتيمتر ، وما إلى ذلك.
- ٪ - يحدد هامشًا بنسبة٪ من عرض العنصر المحتوي
- وراثة - تحدد أن الهامش يجب أن يتم توريثه من العنصر الأصل
نصيحة: القيم السلبية مسموح بها.
مثال
قم بتعيين هوامش مختلفة لجميع الجوانب الأربعة لعنصر <p>:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
الهامش - خاصية الاختزال
لاختصار الكود ، من الممكن تحديد كل خصائص الهامش في خاصية واحدة.
الخاصية هي marginخاصية مختصرة لخصائص الهامش الفردية التالية:
margin-topmargin-rightmargin-bottommargin-left
حتى هنا هو كيف يعمل:
إذا كانت marginالخاصية تحتوي على أربع قيم:
- الهامش: 25 بكسل 50 بكسل 75 بكسل 100 بكسل ؛
- الهامش العلوي 25 بكسل
- الهامش الأيمن 50 بكسل
- الهامش السفلي 75 بكسل
- الهامش الأيسر 100 بكسل
مثال
استخدم خاصية اختزال الهامش مع أربع قيم:
p {
margin: 25px 50px 75px 100px;
}
إذا كانت marginالخاصية تحتوي على ثلاث قيم:
- الهامش: 25 بكسل 50 بكسل 75 بكسل ؛
- الهامش العلوي 25 بكسل
- الهوامش اليمنى واليسرى 50 بكسل
- الهامش السفلي 75 بكسل
مثال
استخدم خاصية اختزال الهامش بثلاث قيم:
p {
margin: 25px 50px 75px;
}
إذا كانت marginالخاصية تحتوي على قيمتين:
- الهامش: 25 بكسل 50 بكسل ؛
- الهوامش العلوية والسفلية 25 بكسل
- الهوامش اليمنى واليسرى 50 بكسل
مثال
استخدم خاصية اختزال الهامش بقيمتين:
p {
margin: 25px 50px;
}
إذا كان marginللعقار قيمة واحدة:
- الهامش: 25 بكسل ؛
- جميع الهوامش الأربعة 25 بكسل
مثال
استخدم خاصية اختزال الهامش بقيمة واحدة:
p {
margin: 25px;
}
القيمة التلقائية
يمكنك ضبط خاصية الهامش على autoتوسيط العنصر أفقيًا داخل الحاوية الخاصة به.
سيأخذ العنصر بعد ذلك العرض المحدد ، وسيتم تقسيم المساحة المتبقية بالتساوي بين الهامش الأيمن والأيسر.
مثال
استخدام الهامش: تلقائي:
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
القيمة الموروثة
يتيح هذا المثال إمكانية توريث الهامش الأيسر للعنصر <p class = "ex1"> من العنصر الأصل (<div>):
مثال
استخدام القيمة الموروثة:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}