الهامش الأيسر هو أحد خصائص كس المستخدمة للتحكم في موضع العناصر على صفحة الويب. تسمح لك هذه الخاصية بتعيين الإزاحة على يسار العنصر ، وتحديد المسافة بين الحافة اليسرى للعنصر وأقرب جيرانه.
لاستخدام الهامش الأيسر ، يجب تحديد مقدار الهامش بالبكسل أو النسب المئوية أو وحدات القياس الأخرى المتاحة. يمكن أن تكون القيمة موجبة أو سالبة ، اعتمادا على اتجاه المسافة البادئة.
مثال على استخدام الهامش الأيسر:
سيكون لهذه الفقرة مسافة بادئة تبلغ 20 بكسل على اليسار
يمكنك أيضا تطبيق قيم هامش يسار متعددة باستخدام إدخال مختصر:
مثال على استخدام الإدخال الأيسر للهامش المختصر:
ستحتوي هذه الفقرة على مسافة بادئة على يسار 10 بكسل على الحدود العلوية والسفلية ، و 20 بكسل على الحدود اليسرى واليمنى
الهامش الأيسر هو خاصية مهمة تساعد على خلق مساحة وتحسين المظهر المرئي لصفحات الويب. يستخدم على نطاق واسع لمحاذاة العناصر وإنشاء مسافات بادئة بينها.
- ما هو هامش اليسار المغلق ولماذا هو مطلوب?
- مبادئ استخدام الهامش الأيسر كس
- ميزات الهامش اليسار كس في متصفحات مختلفة
- كيفية تعيين قيمة الهامش الأيسر كس بشكل صحيح
- القيمة بالبكسل
- قيمة النسبة المئوية
- قيمة ذات قيمة سالبة
- أمثلة على استخدام كس الهامش الأيسر في التخطيط
- خصائص وطرق مفيدة للعمل مع هامش اليسار كس
- إيجابيات وسلبيات استخدام الهامش الأيسر كس
- سؤال وجواب
- ما هو الهامش المتبقي في المغلق?
- كيفية استخدام الهامش المتبقي في المغلق?
- هل من الممكن تعيين قيمة سالبة للهامش اليسار في المغلق?
- كيف يمكنني تعيين قيمة الهامش الأيسر كنسبة مئوية?
ما هو هامش اليسار المغلق ولماذا هو مطلوب?
الهامش الأيسر هو خاصية كس التي تسمح لك لتعيين حجم الهامش الأيسر للعناصر على صفحة ويب. تحدد هذه الخاصية المسافة بين الحافة اليسرى للعنصر والعناصر المجاورة له أو حدود الحاوية الأصلية.
يتيح لك تعيين الهوامش باستخدام خاصية الهامش الأيسر التحكم في الهوامش بين العناصر وتحسين المظهر المرئي لصفحة الويب. يمكن أن تكون المسافة البادئة مفيدة لإنشاء مساحة حول العناصر ومنحها بنية بصرية.
باستخدام قيمة الهامش الأيسر ، يمكنك تعيين قيم سالبة تسمح لعنصر بالتمدد إلى ما بعد الحاوية الأصلية أو العناصر المجاورة. يمكن أن يكون هذا مفيدا ، على سبيل المثال ، لإنشاء تأثير الطبقات البارزة أو لمحاذاة العناصر المتعلقة بوسط الصفحة.
يمكن التعبير عن قيمة الهامش الأيسر بالبكسل (بكسل) أو النسب المئوية ( ٪ ) أو وحدات القياس الأخرى مثل إم أو ريم. بالإضافة إلى ذلك ، يمكنك استخدام كلمات رئيسية مثل تلقائي ، والتي تقوم تلقائيا بمحاذاة العنصر مع مركز الحاوية الأصلية.
على سبيل المثال ، يقوم رمز كس التالي بتعيين المسافة البادئة على يسار العنصر إلى 20 بكسل:
.العنصر {
الهامش الأيسر: 20 بكسل;
}
يتيح لك استخدام خاصية الهامش الأيسر الحصول على تخطيط أكثر مرونة والتأثير على موقع العناصر على الصفحة. هذا مهم بشكل خاص عند إنشاء تصميمات سريعة الاستجابة ، عندما يجب عرض العناصر بشكل صحيح على مختلف الأجهزة وأحجام الشاشة.
مبادئ استخدام الهامش الأيسر كس
تتيح لك خاصية الهامش الأيسر كس تعيين الهامش على اليسار لعنصر ما.
يحدد المسافة بين الحد الأيسر للعنصر والعناصر المجاورة له.
يمكنك استخدام القيم الإيجابية والسلبية.
المبادئ الأساسية لاستخدام الهامش الأيسر:
يؤدي تعيين قيمة هامش يسار موجبة إلى إنشاء إزاحة على يسار حد العنصر.
على سبيل المثال ، الهامش الأيسر: 10 بكسل ؛ سيضبط الهامش على 10 بكسل على يسار الحد.
تعيين الهامش من اليسار إلى الصفر يعني أنه لا يوجد هامش على يسار الحدود.
على سبيل المثال ، الهامش الأيسر: 0 ؛ لن تنشئ مسافة بادئة على يسار الحدود.
يؤدي تعيين قيمة هامش يسار سالبة إلى تحويل العنصر إلى اليسار بالنسبة إلى موضعه الأصلي.
على سبيل المثال ، الهامش الأيسر:-10 بكسل ؛ سينقل العنصر 10 بكسل إلى يسار موضعه الأصلي.
من المهم أن تتذكر أن خاصية الهامش الأيسر تؤثر فقط على المسافة البادئة اليسرى للعنصر,
ولكن لا يؤثر على المسافة البادئة على اليمين أو أعلى أو أسفل.
إذا كان للعنصر عرض ثابت ، فقم بتغيير قيمة الهامش الأيسر
قد يتسبب في نقل عناصر أخرى على الصفحة ، مما قد يؤثر على التخطيط العام.
لذلك ، حدد بعناية قيم الهامش الأيسر لتحقيقها
التأثير المرئي المطلوب دون إزعاج الهيكل العام للصفحة.
ميزات الهامش اليسار كس في متصفحات مختلفة
الهامش الأيسر كس هو خاصية تسمح لك بتعيين الهامش الأيسر للعناصر على صفحة ويب. ومع ذلك ، عند استخدام الهامش الأيسر كس ، قد تكون هناك بعض الخصائص المميزة في المتصفحات المختلفة التي يجب مراعاتها عند تطوير موقع ويب.
1. إنترنت إكسبلورر
إنترنيت إكسبلورر (إي) هي واحدة من المتصفحات التي لديها خصوصياتها الخاصة في العمل مع هامش اليسار كس. في إي ، قد تكون هناك مشاكل مع عرض الهوامش على اليسار ، وخاصة إذا تم استخدام قيمة اليسار هامش سلبي. أيضا ، في إي الإصدار 6 والإصدارات السابقة ، إعادة تعيين الهوامش باستخدام الهامش: 0 لا يعمل دائما بشكل صحيح;
2. موزيلا فايرفوكس
موزيلا فايرفوكس ليس لديه مشاكل معينة مع هامش اليسار كس ، ومع ذلك ، يجب أن يوضع في الاعتبار أن فايرفوكس يمكن تفسير وحدات المسافة البادئة المختلفة (بكسل ، إم،٪) بشكل مختلف. لذلك ، من أجل تحقيق نفس المسافة البادئة في جميع المتصفحات ، يوصى بتحديد قيم المسافة البادئة الدقيقة أو استخدام القيم النسبية بدلا من وحدات البكسل;
3. جوجل كروم
جوجل كروم أيضا ليس لديه مشاكل خاصة مع هامش اليسار كس ، ومع ذلك ، فإنه يجدر النظر في أن كروم يمكن إضافة هوامش تلقائيا إلى عناصر معينة ، على سبيل المثال ، إلى قوائم (أول ، رأ). يمكن أن يؤدي ذلك إلى نتائج غير متوقعة عند استخدام الهامش المتبقي لمثل هذه العناصر. لتجنب هذه المشكلة ، يوصى باستخدام أنماط إعادة الضبط (على سبيل المثال ، التطبيع.المغلق) أو صراحة تحديد المسافة البادئة للعناصر;
4. سفاري
سفاري عادة ما يعمل بشكل جيد مع هامش اليسار كس وليس هناك شكاوى خاصة حول هذا الموضوع. ومع ذلك ، فمن الجدير بالذكر أن سفاري يدعم البادئات المختلفة لبعض خصائص كس ، لذلك قد تحتاج إلى استخدام البادئات للتوافق عبر المتصفح.;
5. أوبرا
لديها أوبرا أيضا بعض الميزات الخاصة في العمل مع هامش اليسار المغلق. على سبيل المثال ، قد تعرض أوبرا بشكل غير صحيح الهامش المتبقي للعناصر ذات الموضع المطلق أو الثابت. أيضا ، ضع في اعتبارك أن أوبرا تدعم الإصدارات القديمة من كس ، لذلك قد لا تعمل بعض الخصائص أو القيم الجديدة بالطريقة التي تعمل بها في المتصفحات الحديثة الأخرى.
بشكل عام ، عند تطوير موقع ويب واستخدام الهامش الأيسر كس ، من المهم أن تأخذ في الاعتبار ميزات المتصفحات المختلفة واختبار العرض على منصات وأجهزة مختلفة. يوصى أيضا باستخدام طرق التطوير الحديثة مثل فليكس بوكس أو الشبكة ، والتي توفر طريقة أكثر مرونة وموثوقية لإدارة الهوامش وتخطيط العناصر.
كيفية تعيين قيمة الهامش الأيسر كس بشكل صحيح
الهامش الأيسر المغلق هو خاصية المغلق الذي يحدد الهامش على الجانب الأيسر من عنصر من الحاوية الأم أو عناصر أخرى.
يمكن تعيين قيمة الهامش الأيسر بالبكسل (بكسل) أو النسب المئوية ( ٪ ) أو وحدات القياس الأخرى.
القيمة بالبكسل
لتعيين قيمة الهامش الأيسر بالبكسل ، استخدم بناء الجملة التالي:
{
الهامش الأيسر: القيمة;
} عنصر
على سبيل المثال:
ص {
الهامش الأيسر: 20 بكسل;
}
في هذا المثال ، ستحتوي الفقرة على مسافة بادئة تبلغ 20 بكسل على الجانب الأيسر.
قيمة النسبة المئوية
لتعيين قيمة الهامش الأيسر كنسبة مئوية ، استخدم بناء الجملة التالي:
العنصر {
الهامش الأيسر: القيمة %;
}
على سبيل المثال:
ص {
الهامش-اليسار: 50%;
}
في هذا المثال ، سيكون للفقرة مسافة بادئة تساوي 50٪ من عرض العنصر الأصلي.
قيمة ذات قيمة سالبة
يمكن أن يكون للهامش الأيسر أيضا قيمة سالبة ، مما يسمح لك بتحويل عنصر إلى اليسار بالنسبة إلى موضعه الطبيعي. للقيام بذلك ، استخدم رقم سالب أو قيمة ناقص ( -).
على سبيل المثال:
ص {
الهامش الأيسر: -10 بكسل;
}
في هذا المثال ، سيتم تحويل الفقرة إلى اليسار بمقدار 10 بكسل بالنسبة إلى موضعها الطبيعي.
ملاحظة: إذا كانت لديك عناصر أخرى على الصفحة تؤثر على موضع العنصر المحدد ، فلا تنس أن تأخذ في الاعتبار خصائصها وقيم الهامش الأيسر.
في الحالات البسيطة ، يمكنك استخدام أدوات المطور في المتصفح للتحقق من الهوامش وضبطها.
آمل أن تكون هذه المواد ساعدت على معرفة كيفية تعيين قيمة الهامش الأيسر المغلق.
أمثلة على استخدام كس الهامش الأيسر في التخطيط
1. المسافة البادئة على يسار الكتلة:
محتوى الكتلة
قائمة البند 2
بند القائمة 3
الخلية 3
الخلية 4
في هذا المثال ، نستخدم خاصية الهامش الأيسر لتعيين الهامش على يسار الجدول. ستكون المسافة البادئة 40 بكسل.
خصائص وطرق مفيدة للعمل مع هامش اليسار كس
- الهامش المتبقي في كس هو أحد خصائص نموذج الكتلة ويسمح لك بتعيين المسافة بين الحافة اليسرى للعنصر والحاوية الأصلية أو العناصر الأخرى على الصفحة. هذه الخاصية مفيدة جدا عند إنشاء الشبكات ومحاذاة العناصر وإنشاء هوامش بين المحتوى.
- هناك عدة طرق لتحديد الهامش الأيسر:
- - يحدد الهامش الأيسر بوحدات القياس (على سبيل المثال ، وحدات البكسل والنسب المئوية والنسبة المئوية ، إلخ.).
- محاذاة العنصر تلقائيا إلى الحافة اليسرى للحاوية الأصل.
- الهامش-اليسار: يرث ؛ - يرث قيمة الهامش على يسار العنصر الأصل.
- يمكنك أيضا استخدام الخصائص والقيم التالية مع الهامش الأيسر:
- الهامش-اليسار: 0 ؛ - إعادة تعيين المسافة البادئة على يسار العنصر.
الهامش-اليسار: - القيمة ؛ - سيخلق هامشا سالبا على اليسار ، مما يسمح للعنصر بتجاوز الحاوية الأصلية.
| يمكن أيضا استخدام الهامش الأيسر مع خصائص وطرق كس الأخرى ، مثل الهامش العلوي والهامش الأيمن والهامش السفلي ، مما يسمح لك بضبط تخطيط العناصر على الصفحة بدقة أكبر. | أمثلة على استخدام خاصية الهامش الأيسر: |
|---|---|
الممتلكات | |
الهامش الأيسر الوصف: 10 بكسل; | يضبط الهامش الأيسر على 10 بكسل. |
الهامش الأيسر: تلقائي; | يقوم تلقائيا بمحاذاة العنصر إلى الحافة اليسرى للحاوية الأصل. |
الهامش الأيسر: وراثة;
يرث قيمة الهامش على يسار العنصر الأصل.
يتيح لك استخدام خاصية الهامش الأيسر مع خصائص كس الأخرى إنشاء تخطيطات فريدة وجميلة لصفحات الويب. سيساعدك استكشاف إمكانيات هذه الخاصية على أن تصبح مطور ويب أكثر مرونة وخبرة.
- إيجابيات وسلبيات استخدام الهامش الأيسر كس
- الهامش الأيسر كس هو خاصية تسمح لك بتعيين الهامش على يسار العنصر. يمكن أن يكون مفيدا جدا لمعالجة تخطيط العناصر على صفحة الويب.
- سهولة الاستخدام: واحدة من المزايا الرئيسية لاستخدام الهامش الأيسر كس هو بساطته وسهولة الاستخدام. باستخدام هذه الخاصية ، يمكنك بسهولة تعيين المسافة البادئة على يسار العنصر لإنشاء الموقع المطلوب.
مرونة التصميم: باستخدام هامش اليسار كس يسمح لك لخلق تصميم مرن ، حيث يمكن ترتيب العناصر في الترتيب الصحيح وخلق بعض المسافات البادئة بينهما. يمكن أن يكون هذا مفيدا عند إنشاء تخطيطات مختلفة أو ترتيب العناصر على الصفحة.
- إدارة الفضاء: هامش اليسار المغلق يسمح لك لإدارة المسافة بين العناصر على صفحة ويب. يمكن أن يكون هذا مفيدا إذا كنت بحاجة إلى إنشاء هوامش بين كتل النص أو الصور لجعلها أكثر قابلية للقراءة أو تحسين مظهر الصفحة.
- ومع ذلك ، قد يكون لاستخدام الهامش الأيسر كس بعض العيوب:
صعوبة العرض على أجهزة مختلفة: إذا لم تقم بضبط الهامش الأيسر كس بعناية ، فقد تحدث مشكلات في العرض على أجهزة مختلفة ودقة الشاشة. على سبيل المثال ، قد تتحرك العناصر بعيدا أو تتداخل مع بعضها البعض ، مما قد يؤثر سلبا على تجربة المستخدم.
فقدان الفضاء: يمكن أن يؤدي استخدام الهامش الأيسر كس إلى فقدان المساحة على صفحة الويب. حتى الهوامش الصغيرة بين العناصر يمكن أن تجعل بعض أجزاء الصفحة فارغة. قد يكون هذا غير مرغوب فيه ، خاصة إذا كنت تحاول تحقيق أقصى استفادة من المساحة المتاحة.
بشكل عام ، الهامش الأيسر كس هو خاصية قوية يمكن أن تكون مفيدة عند إنشاء وإدارة مظهر صفحة ويب. ومع ذلك ، كما هو الحال مع أي أداة أخرى ، يجب أن تكون حذرا عند استخدامها وتحقق بعناية من النتيجة على الأجهزة المختلفة ودقة الشاشة.
سؤال وجواب
ما هو الهامش المتبقي في المغلق?
الهامش المتبقي في كس هو خاصية تتحكم في المسافة البادئة إلى يسار عنصر من الحاوية الأصلية أو العناصر المجاورة.
كيفية استخدام الهامش المتبقي في المغلق?
لاستخدام الهامش الأيسر في كس ، يمكنك تحديد قيمة لخاصية الهامش الأيسر في عنصر كس. على سبيل المثال ، إذا كنت تريد إضافة هامش يسار 20 بكسل لعنصر ما ، فيمكنك استخدام الكود التالي: الهامش-اليسار: 20 بكسل;
هل من الممكن تعيين قيمة سالبة للهامش اليسار في المغلق?
نعم ، يمكنك تعيين قيمة سالبة للهامش المتبقي في كس. على سبيل المثال ، إذا كنت تريد نقل عنصر إلى اليسار بمقدار 10 بكسل بالنسبة للحاوية الأصلية ، فيمكنك استخدام الكود التالي: الهامش-اليسار :-10 بكسل;