المسافة البادئة من جميع الجوانب في CSS الحشو المغلق
لعرض العناصر على صفحة الويب بشكل أكثر جمالا، يتم استخدام الهوامش الخارجية والداخلية في CSS، وسننظر في ذلك الآن باستخدام الأمثلة.
كل عنصر، سواء كان فقرة أو div أو صورة أو مقطع فيديو، عبارة عن كتلة يمكن وضع مسافة بادئة لها في الداخل باستخدام خاصية الحشو وخارجها باستخدام هامش.
في CSS، تتم كتابة خصائص المسافة البادئة بهذه الطريقة (يتم أخذ الفقرة كمثال):
بدلاً من علامة P، ستكتب العنصر الخاص بك، بالطبع، والذي سيتم تطبيق المسافة البادئة عليه.
من الضروري أن نفهم ونتذكر أنه بالنسبة لمعلمات الهامش والحشو، فإن بناء المسافات البادئة لكل جانب هو نفسه.
أي أن لدينا 4 قيم في كل مسافة بادئة:
القيم البادئة.
- القيمة الأولى:الحشو العلوي
- المعنى الثاني :المسافة البادئة اليمنى؛
- المعنى الثالث:المسافة البادئة السفلية؛
- المعنى الرابع :المسافة البادئة اليسرى.
في هذا المثال، قمت بعمل مسافة بادئة خارجية للهامش في CSS بهذه الطريقة: كتبت 20 بكسل في الأعلى، و10 بكسل على اليسار واليمين (عادةً ما يتم ضبطهما بنفس الطريقة للتناظر)، و30 بكسل في الأسفل.
وبالنسبة للحشوة، حددت: 10 بكسل في الأعلى، واليسار واليمين، و14 بكسل في الأسفل.
يمكن تقليل قيمة المسافات البادئة في خصائص الهامش والحشو، بشرط أن تكون بنفس الحجم.
من المثال الخاص بي، سيبدو التدوين المختصر كما يلي:
أي أنه عندما يكون الإدخال الرقمي الأخير مفقودًا، في هذه الحالة بالنسبة للمسافة البادئة اليسرى، يستبدل المتصفح تلقائيًا نفس القيمة للمسافة البادئة اليسرى مثل القيمة الموجودة على اليمين.
وفي حالتي، ستكون الهوامش على اليمين واليسار 10 بكسل في كل من الهامش والحشوة.
وإذا كان لديك نفس القيم للهوامش في الأعلى والأسفل (على سبيل المثال: 16 بكسل)، وأيضًا نفس القيم للهوامش في اليسار واليمين (على سبيل المثال: 20 بكسل)، فسيتم الإدخال لديك شكل أكثر اختصارًا:
وفقًا لذلك، بالنسبة للمسافة البادئة الداخلية، يتم إجراء إدخال CSS مطابقًا لهذا الإدخال.
تطبيق المسافات البادئة الفردية: لكل جانب على حدة.
يتم استخدام خصائص القيمة المفردة التالية لتحديد مسافة بادئة فردية:
خصائص المسافة البادئة لكل جانب.
- الهامش العلوي: 3 بكسل؛ الهامش العلوي الخارجي؛
- الهامش الأيسر: 4 بكسل؛ الهامش الخارجي الأيسر؛
- الهامش الأيمن: 6 بكسل؛ الهامش الأيمن الخارجي؛
- الهامش السفلي: 10 بكسل؛ الهامش السفلي الخارجي.
تتم كتابة إدخالات المسافات البادئة الداخلية بنفس الطريقة، ما عليك سوى استبدال الهامش بالحشوة.
على سبيل المثال، بالنسبة لجميع صور img، لديك بالفعل جميع المسافات البادئة مكتوبة بلغة CSS.
أي (للتوضيح) يحتوي الهامش الخارجي على القيم التالية: 10 بكسل في الأعلى، و20 بكسل في اليسار واليمين، و14 بكسل في الأسفل.
والحشوة الداخلية 6 بكسل على الجوانب الأربعة.
لنفترض أنك قررت وضع صورة أخرى على الصفحة، ولكنك تريد تغيير الهامش الخارجي فقط في الأعلى، وترك الباقي كما هو. ولإكمال هذه المهمة، يكفي تسجيل فئة لهذه الصورة وإضافة إدخال إضافي إلى CSS.
ونتيجة لذلك، فإن الصورة التي أضفتها مع فئة verx ستقبل جميع الحشوات المحددة في CSS لعلامة img، وستغير فقط الحشو الخارجي للجانب العلوي (في حالتنا: 40 بكسل).
حاولت أن أجعل وصف المسافات البادئة لـ CSS أكثر تفصيلاً، ولكن إذا كان لديك أي أسئلة، فاطرحها من خلال التعليقات.
يتم تقييم مورد الويب من قبل المستخدمين بناءً على جاذبيته المرئية. لذلك، حتى النص المفيد معلوماتيًا قد لا يمكن قراءته نظرًا لأنه مصمم بشكل سيء. الخلاصة - تحتاج إلى التعامل بعناية وانتباه ليس فقط مع المحتوى الدلالي لصفحات الموقع، ولكن أيضًا عرضه المرئي. لقد أدى ظهور تقنية CSS إلى توسيع إمكانيات إنشاء مقالات جذابة. إحدى الخصائص المصممة لتسهيل قراءة الكتابة هي المسافة البادئة للنص في CSS.
الهوامش والحشو: ما الفرق؟
قبل البدء في تنسيق النص، يجب أن تفهم ما هي الهوامش والمسافات البادئة. على الرغم من أن عناصر الترميز هذه في بعض الحالات تبدو متشابهة بالنسبة للمستخدم، إلا أن هناك اختلافات جوهرية بينها:
- يتم تحديد الحقل بواسطة الخاصية حشوة، مسافة بادئة - هامِش;
- يتم تحديد الهامش من خلال الفجوة بين المحتوى وحدود الكتلة، والمسافة البادئة - بين حدود الكتل المجاورة؛
- قد تؤخذ أو لا تؤخذ الهوامش بعين الاعتبار في أبعاد العنصر (العرض والارتفاع).
خاصية الهامش
لذلك، لتعيين المسافة البادئة الأفقية أو الرأسية لنص CSS، استخدم البنية هامِش. تنطبق هذه الخاصية على العلامة تحديد فقرة الوثيقة. وفي أبسط الحالات يتم كتابتها على النحو التالي:
الهامش: 12 بكسل.
يعني هذا السطر أنه حول كتلة النص (أو أي كتلة أخرى) سيكون هناك مسافة بادئة تبلغ 12 بكسل على جميع الجوانب. ولزيادة الفاصل ثلاث مرات مثلا اكتب فقط:
الهامش: 36 بكسل.
ولكن ماذا لو كان الفاصل الزمني بين الكتل مختلفًا على كل جانب؟ يستخدم مطورو صفحات الويب عدة أشكال للتسجيل:
- الهامش: 11 بكسل 22 بكسل.
- الهامش: 11 بكسل 22 بكسل 33 بكسل.
- الهامش: 11 بكسل 22 بكسل 33 بكسل 44 بكسل.
في المثال الأول، سيتم وضع مسافة بادئة بمقدار 11 بكسل من الحدود السفلية والعلوية للكتلة، و22 بكسل على جوانب الكتلة. وفقًا لنموذج التسجيل الثاني، سيكون هناك 11 بكسل بين الحافة العلوية للكتلة والمحتوى، و33 بكسل بين الجزء السفلي، و22 بكسل على الجوانب. في الحالة الثالثة، ستكون المساحة المتروكة 11 بكسل في الأعلى، و22 بكسل على اليمين، و33 بكسل في الأسفل، و44 بكسل على اليسار.
من الممكن أيضًا تسجيل المسافة إلى حدود الكتلة على جانب واحد فقط: الهامش العلوي، الهامش السفلي، الهامش الأيسر، الهامش الأيمن. من خلال ترجمة أسماء العقارات إلى اللغة الروسية، من السهل تخمين الغرض منها. على سبيل المثال، يشير الإدخال التالي إلى أن الهامش الأيمن سيكون 22 بكسل:
الهامش الأيمن: 22 بكسل.
بالنسبة للأطراف الأخرى، يفترض أن تكون المسافات حول الكتلة مساوية لقيمة العنصر الأصلي.
ملكية هامِشيحتوي على ميزة يجب على المطور أن يأخذها في الاعتبار عند استخدام المسافة البادئة الرأسية لنص CSS. لا يتم تلخيص فترات العناصر المتجاورة، ولكن يتم فرضها على بعضها البعض. على سبيل المثال، دع إحدى الكتل لديها الهامش السفلي: 15 بكسل، والكتلة المجاورة لها أدناه الهامش العلوي: 35 بكسل. تشير الحسابات المدرسية والحس السليم إلى أن المساحة الإجمالية بينهما ستكون 50 بكسل. في الواقع، ليست هذه هي القضية. كتلة ذات قيمة عقارية عالية هامِشسوف "تستوعب" جارتها. ونتيجة لذلك، فإن التباعد بين العناصر سيكون 35 بكسل.
"خط أحمر
عند تنسيق مستند في محرر نصوص، يفضل المستخدمون تحديد كل فقرة جديدة باستخدام خط "أحمر". بمساعدة CSS، من السهل وضع مسافة بادئة للنص على اليسار - يتم استخدام البناء المسافة البادئة النص. هو مكتوب مثل هذا:
المسافة البادئة للنص: 11 بكسل.
أي أنه سيتم إزاحة السطر الأول من الفقرة بالنسبة إلى الحافة اليسرى بمقدار 11 بكسل. لجعل النص الموجود على صفحة الويب أشبه بمستند في المحرر، يجب عليك أيضًا تعيين ما يلي:
مسافة بادئة للنص: 11 بكسل؛
محاذاة النص: تبرير.
بالإضافة إلى البكسل، عند وصف العلامات، يُسمح باستخدام وحدات أخرى - البوصات والنقاط والنسب المئوية. دع الكتلة تحتوي على حشوة نص CSS بنسبة 10٪. مع عرض كتلة يبلغ 500 بكسل، سيكون الخط الأحمر 50 بكسل (10% من 500).
يمكن ضبط هذه الخاصية على يرث. يشير هذا الإدخال إلى أن الكتلة تستخدم خاصية مشابهة للكتلة الأصلية.
مسافة بادئة للنص: ترث.
والمثير للدهشة أنه يمكن أن يأخذ أيضًا قيمًا سلبية! في هذه الحالة، يتم تشكيل ما يسمى بالتراكبات، أي أن النص الرئيسي يظل في مكانه، ويتم إزاحة السطر الأول إلى اليسار بمقدار 22 بكسل:
مسافة بادئة للنص: -22 بكسل.
لمنع الحروف من تجاوز الحدود اليسرى للمتصفح، بالإضافة إلى المسافة البادئة النصتحتاج إلى استخدام البناء لتعيين المجال:
المساحة المتروكة لليسار: 22 بكسل.
تتم مراجعة الخصائص الأساسية لـ CSS. وسوف تساعد الممارسة على ترسيخها. فيما يلي بعض النصائح النهائية لتطبيق ما تعلمته على تطوير موقع الويب الخاص بك:
- الخط الأحمر والمسافات البادئة للنص مفهومان مختلفان، ويتم استخدام خصائص مختلفة للإشارة إليهما؛
- بالنسبة للمسافات البادئة الرأسية، لا تنطبق قواعد الرياضيات - تتداخل الفواصل الزمنية، والعنصر ذو القيمة الأكبر "يفوز"؛
- يتم استخدام المسافة البادئة السلبية للفقرة للإشارة إلى السطر الأول من الفقرة باستخدام صورة.
كتبت أنيا الكود التالي (المثال 1) واستلمت الصفحة الموضحة في الشكل. 1. لكن آنيا لا تحتاج إلى وجود مسافة بين الكتل، وكذلك على يمين ويسار الكتل. ما هي التغييرات في الكود المطلوبة لهذا؟
هناك مسافة كبيرة جدًا بين العنوان والنص الأساسي، كيف يمكنني تقليلها؟
إلى الفقرة (العلامة
) والرأس (العلامة
) يقوم تلقائيًا بإضافة الهوامش العلوية والسفلية، والتي توفر معًا مسافة كبيرة بين العنوان والنص. لتقليل مقدار المسافة البادئة، يجب عليك إضافة خاصية هامش أسفل بشكل صريح إلى محدد H1. علاوة على ذلك، يمكنك تعيين قيمة موجبة أو صفر أو سلبية. بهذه الطريقة يكون من السهل ضبط قيمة المسافة البادئة المطلوبة.
كيف يمكنني إضافة مسافة بادئة للسطر الأول لكل فقرة؟
عندما تحتاج إلى تعيين مسافة بادئة للفقرة، فمن الأفضل استخدام خاصية نمط المسافة البادئة للنص. تحدد قيمته مقدار نقل نص السطر الأول إلى اليمين من موضعه الأصلي. لا يتغير عرض كتلة النص ويظل محددًا في البداية. يمكن تحديد مقدار المسافة البادئة بالبكسل أو النسب المئوية أو الوحدات الأخرى المتاحة (المثال 1).
كيفية إزالة المسافة البادئة في أعلى وأسفل القائمة؟
استخدم خصائص نمط الهامش العلوي والهامش السفلي لمحدد UL أو OL، وفقًا لنوع القائمة. يمكنك أيضًا استخدام خاصية الهامش العامة.
كيفية تغيير المسافة البادئة على صفحة ويب؟
إن المساحة المتروكة على صفحة الويب، على الرغم من عدم ظهورها، لا تسمح للمحتوى بالتوافق مع حواف نافذة المتصفح للحصول على تجربة قراءة مريحة. يمكنك ضبط قيمة الحشو الخاصة بك عن طريق تغيير قيم خاصية الهامش لمحدد النص.
كيفية إزالة الحشو حول النموذج؟
عند إضافة نموذج عبر علامة