تخطيط Block div - الأساسيات. كيفية المسافة البادئة في CSS؟ المسافة البادئة من كتلة CSS
في كثير من الأحيان، يواجه مصممو التخطيط مشاكل في وضع العناصر على الصفحة بسبب وجود مسافات بادئة إضافية في مواقف معينة. ستنظر المقالة في الحالة التي يتم فيها وضع صورة داخل كتلة، مما يؤدي إلى مسافة بادئة غير معروفة. ستجد هنا شرح وحل لهذه المشكلة.
كما هو الحال في الحياة العادية، هناك مواقف شاذة في التخطيط يصعب تفسيرها. هذا هو بالضبط الموقف الذي يمكن أن ينشأ عند إدراج علامة إدراج صورة (img) في حاوية تحتوي على خصائص عنصر كتلة أو كائن عائم. يكمن الارتباك في هذا الموقف في المسافة البادئة غير المفهومة التي تظهر أسفل الصورة.
دعونا نلقي نظرة على مثال عملي
لذلك، من أجل الوضوح وتصور أفضل للمشكلة، أقترح أن ننظر إلى كل شيء، وإذا جاز التعبير، "لمسها" في الممارسة العملية. نحن نأخذ أي صورة ونضعها في div. أدناه يمكنك رؤية رمز المثال:
لغة البرمجة
< div> < img src= "img.png" width= "250px" alt= "" />
عند إنشاء الأنماط، املأ الخلفية الداخلية للكتلة باللون الأحمر. في الظروف العادية، ستشغل الصورة كامل المساحة داخل الكتلة وتغطي الخلفية الحمراء. نكتب رمز التسجيل
div ( العرض: كتلة؛ العرض: 250 بكسل؛ الهامش: 0 بكسل تلقائي؛ /*توسيط الكتلة*/ الخلفية: #ff0000;/*املأ الكتلة باللون الأحمر،لتصور الحشو*/ ) الجسم ( الخلفية: #eee; )
ونتيجة لذلك، سيظهر لنا المتصفح الصورة التالية
انطلاقا من الشريط الأحمر في الجزء السفلي من الحاوية، يمكن القول أن هناك مسافة بادئة غير مفهومة. باستخدام لوحة مشرف الموقع في المتصفح، أصبح من المعروف أن المسافة البادئة كانت 5511 بكسل.
من المضحك جدًا أن جميع المتصفحات الشائعة بها هذا الخطأ، لكن برنامج Internet Explorer المفضل لدى الجميع يعمل بشكل لا تشوبه شائبة في هذه الحالة.
سبب المسافة البادئة
كشخص حاصل على تعليم تقني عالي، يمكنني أن أؤكد لكم أنه لا شيء يحدث عبثًا، كل شيء له سبب. بعد أن نظرت في هذه المسألة، كنت مقتنعا بذلك مرة أخرى. يكمن الارتباك كله في الخصائص القياسية للعناصر. بشكل افتراضي، تحتوي علامة img على خصائص العنصر المضمنة، وهذا بدوره يعني أنه سيتم محاذاة العنصر مع الخط الأساسي للنص. يقع هذا الخط أعلى الحافة السفلية للكتلة مباشرةً، حيث يوجد هامش إلزامي للنص - مساحة لـ "ذيول" الحروف.
حل
لتصحيح هذا العيب البسيط، يكفي تعيين خصائص عنصر الكتلة للصورة. سوف تساعدنا خاصية العرض في هذا، حيث نقوم بتخصيصها للصورة العرض محجوب؛ والتخلص من المشاكل غير الضرورية. يمكنك أيضًا تمكين المحاذاة الرأسية عبر خاصية المحاذاة العمودية. سيساعد هذا أيضًا في التخلص من المسافة البادئة غير المرغوب فيها.
ما هي المتصفحات التي تعمل فيها؟
| 6.0+ | 5.0+ | 9.5+ | 4.0+ | 3.0+ | - | - |
تتكون أي صفحة ويب من عناصر موجودة فيها، ويكون تخطيط كتلة div مسؤولاً دائمًا عن موضعها. بالطبع، هناك أيضًا تخطيط جدول باستخدام العلامات
| ، وهناك جدل حول النظام الأفضل للاستخدام - القائم على الكتلة أم القائم على الجدول. ومع ذلك، في الواقع، لن تجد حاليًا أيًا من المواقع الحديثة والشعبية والمريحة التي تستخدم التخطيط الجدولي فقط. في أحسن الأحوال، يتم استخدامه فقط للغرض المقصود منه - أي إنشاء الجداول، ولكن ليس لتشكيل بنية الموقع نفسها.
الحقيقة هي أن تخطيط div للموقع يسمح لك بتعيين العديد من خصائص CSS غير المتوفرة للجداول. بالإضافة إلى ذلك، فإن أكبر عيب في نظام الجدول هو أن الجدول لن يظهر على الشاشة حتى يتم تحميله بالكامل بواسطة المتصفح. إذا تم إنشاء الموقع بأكمله في جدول، فلن يظهر على الشاشة إلا بعد تحميل كود html الخاص بالصفحة بالكامل. علامة DIV والممتلكات العائمةأساس نظام الكتلة هو العلامة ، وهي الحاوية للمحتوى. وقد تحتوي أيضًا على حاويات أخرى بداخلها .استخدام علامة DIV ليس أكثر صعوبة من . كقاعدة عامة، يتم تشكيل هيكل الموقع القياسي على النحو التالي: هناك حاوية رئيسية (غالبًا ما يتم تعيين فئة تسمى المجمع، والحاوية، والرئيسية، وما إلى ذلك). يوجد داخل هذه الحاوية كتل من القائمة وجزء المحتوى والشريط الجانبي.
بشكل افتراضي، يتم وضع كل كتلة جديدة على سطر جديد. من أجل وضع كتلة على يسار أو يمين كتلة أخرى (على سبيل المثال، لوضع شريط جانبي على اليمين)، يتم استخدام الخاصية float. بشكل افتراضي، تحتوي على القيمة "لا شيء"، ولكن يمكنك أيضًا تعيين القيم "يسار" و"يمين". دعونا نلقي نظرة على هذه الخاصية باستخدام مثال مكون من كتلتين.
كتلة المحتوى
كتلة الشريط الجانبي
هذا الكود سيعطي النتيجة التالية: خاصية واضحةمن المهم أن نأخذ في الاعتبار أن الخاصية float لا تنطبق فقط على الكتلة نفسها التي تم تسجيلها فيها، ولكن أيضًا على العنصر اللاحق الذي سيتبع هذه الكتلة. أي أننا إذا أضفنا كتلة أخرى إلى الكتلتين الموصوفتين أعلاه دون تحديد أي خصائص لها، فلن يتم تحديد موقعها على سطر جديد، بل ستبدأ على يمين الكتلة الثانية. لتجنب ذلك، يستخدم تخطيط block div الخاصية Clear، والتي يجب تعيينها للكتلة التي نريد وضعها على سطر جديد. في أغلب الأحيان، يتم ضبطه على "كلاهما" لهذا الغرض، ولكن يمكننا أيضًا ضبطه على "يسار" أو "يمين" إذا أردنا ليس فقط وضع الكتلة على سطر جديد، ولكن أيضًا ضبط محاذاتها. دعونا نضيف عنصرا جديدا إلى المثال أعلاه:
كتلة المحتوى
كتلة الشريط الجانبي
كتلة جديدة تقع أدناه
نتيجة:
المسافة البادئة في تخطيط الكتلةبالإضافة إلى موقع الكتل، من المهم تعيين مسافات بادئة بين الكتل وداخلها. لهذا، يتم استخدام خصائص الهامش والحشو، على التوالي. يتم تعيين المسافات البادئة بشكل منفصل للأجزاء العلوية واليمنى والسفلية واليسرى من العنصر. ويمكن تحديدها في سطر واحد من خلال إدراج أربع قيم: الهامش: 20 بكسل 10 بكسل 0 40 بكسل سيتم وضع الكتلة التي تحتوي على هذه المعلمات على مسافة 20 بكسل أسفل العنصر الأصلي، وعشر بكسل من العنصر الأيمن، ولن يكون لها أي حشوة في الأسفل، وسيكون بها هامش 40 بكسل على اليسار. إذا تم تحديد جميع المؤشرات نفسها في خاصية الحشو، فستكون هذه هي الحشو الداخلي للمحتوى فيما يتعلق بحدود الكتلة التي يقع فيها. يمكنك أيضًا تعيين خصائص فردية للحواف الفردية باستخدام الهامش العلوي، والهامش السفلي، والهامش الأيسر، والهامش الأيمن (وبالمثل للحشو). في هذه الحالة، إذا لم يتم تحديد أي من الحواف، فستكون المسافة البادئة على جانبها صفرًا أو سيتم تحديدها بواسطة خصائص CSS العامة المحددة للكتل الموجودة على الصفحة.
كل شيء في CSS له مربع حوله، وفهم هذه المربعات هو المفتاح لتتمكن من إنشاء تخطيطات باستخدام CSS، أو محاذاة العناصر مع عناصر أخرى. في هذا الدرس سوف نلقي نظرة مناسبة على CSS نموذج الصندوق، حتى تتمكن من الانتقال إلى مهام تخطيط أكثر تعقيدًا مع فهم كيفية عملها والمصطلحات المرتبطة بها.
كتلة ومربعات مضمنةفي CSS لدينا على نطاق واسع نوعان من الصناديق - صناديق الكتلةو صناديق مضمنة. تشير هذه الخصائص إلى كيفية تصرف المربع فيما يتعلق بتدفق الصفحة، وفيما يتعلق بالمربعات الأخرى في الصفحة: إذا تم تعريف الصندوق على أنه كتلة، فسوف يتصرف بالطرق التالية:
ما لم نقرر تغيير نوع العرض إلى السطر، فإن عناصر مثل العناوين (على سبيل المثال: ) وتستخدم جميع S الكتلة كنوع العرض الخارجي الخاص بها بشكل افتراضي. إذا كان الصندوق يحتوي على نوع عرض خارجي مضمن، فعندئذٍ:
ال عنصر يستخدم للروابط، , و كلها أمثلة على العناصر التي سيتم عرضها بشكل افتراضي. يتم تحديد نوع المربع المطبق على عنصر ما من خلال قيم خاصية العرض مثل block وinline، ويرتبط بـ الخارجيقيمة العرض. جانبا: أنواع العرض الداخلية والخارجيةفي هذه المرحلة، من الأفضل أن نوضح أيضًا داخليو الخارجيأنواع العرض. كما ذكرنا سابقًا، تحتوي المربعات في CSS على الخارجينوع العرض، الذي يعرض تفاصيل ما إذا كان المربع كتلة أم مضمّنة. تحتوي الصناديق أيضًا على داخليومع ذلك، فإن نوع العرض هو الذي يحدد كيفية وضع العناصر الموجودة داخل هذا المربع. بشكل افتراضي، يتم وضع العناصر الموجودة داخل الصندوق التدفق الطبيعي، مما يعني أنها تتصرف تمامًا مثل أي عناصر كتلة وعناصر مضمنة أخرى (كما هو موضح أعلاه). ومع ذلك، يمكننا تغيير نوع العرض الداخلي باستخدام قيم العرض مثل flex . إذا قمنا بتعيين العرض: flex؛ في أحد العناصر، يكون نوع العرض الخارجي هو block، ولكن يتم تغيير نوع العرض الداخلي إلى flex . أي عناصر فرعية مباشرة لهذا الصندوق ستصبح عناصر مرنة، وسيتم وضعها وفقًا للقواعد المنصوص عليها في مواصفات Flexbox، والتي ستتعرف عليها لاحقًا. ملحوظة: لقراءة المزيد حول قيم العرض، وكيفية عمل المربعات في التخطيط الكتلي والمضمّن، قم بإلقاء نظرة على دليل MDN للتخطيط الكتلي والمضمن. عندما تنتقل للتعرف على تخطيط CSS بمزيد من التفاصيل، ستواجه flex وقيمًا داخلية متنوعة أخرى يمكن أن تحتوي عليها الصناديق الخاصة بك، على سبيل المثال الشبكة. ومع ذلك، فإن التخطيط المحظور والمضمن هو الطريقة الافتراضية التي تتصرف بها الأشياء على الويب - كما قلنا أعلاه، يشار إليها أحيانًا باسم التدفق الطبيعي، لأنه بدون أي تعليمات أخرى، يتم وضع الصناديق الخاصة بنا على شكل مربعات أو مربعات مضمنة. أمثلة على أنواع العرض المختلفةدعنا ننتقل ونلقي نظرة على بعض الأمثلة. أدناه لدينا ثلاثة عناصر HTML مختلفة، جميعها تحتوي على نوع عرض خارجي من الكتلة . الأول هو فقرة، والتي تحتوي على حد مضاف في CSS. يعرض المتصفح هذا كـ مربع الكتلة، بحيث تبدأ الفقرة على سطر جديد، وتمتد إلى العرض الكامل المتاح لها. والثاني عبارة عن قائمة تم وضعها باستخدام العرض: flex . يؤدي هذا إلى إنشاء تخطيط مرن للعناصر الموجودة داخل الحاوية، إلا أن القائمة نفسها عبارة عن مربع كتلة و- مثل الفقرة - تتوسع إلى عرض الحاوية بالكامل وتنقسم إلى سطر جديد. أسفل هذا لدينا فقرة على مستوى الكتلة، بداخلها فقرتان عناصر. عادة ما تكون هذه العناصر مضمنة، ولكن أحد العناصر لديه فئة كتلة، وقد قمنا بتعيينها للعرض: كتلة . يمكننا أن نرى كيف تتصرف العناصر المضمنة في هذا المثال التالي. ال تكون s الموجودة في الفقرة الأولى سطرية بشكل افتراضي، وبالتالي لا تفرض فواصل أسطر. لدينا أيضا
أخيرًا لدينا فقرتان تم إعدادهما للعرض: inline . تعمل كل من الحاوية المرنة والفقرات المضمنة معًا على سطر واحد بدلاً من تقسيمها إلى أسطر جديدة كما تفعل إذا تم عرضها كعناصر على مستوى الكتلة. في المثال، يمكنك تغيير العرض: مضمن للعرض: كتلة أو عرض: مضمن-فليكس للعرض: فليكس للتبديل بين أوضاع العرض هذه. سوف تواجه أشياء مثل التخطيط المرن لاحقًا في هذه الدروس؛ الشيء الأساسي الذي يجب تذكره الآن هو أن تغيير قيمة خاصية العرض يمكن أن يغير ما إذا كان نوع العرض الخارجي للمربع محظورًا أم مضمنًا، مما يغير طريقة عرضه جنبًا إلى جنب مع العناصر الأخرى في التخطيط. وفي بقية الدرس سوف نركز على نوع العرض الخارجي. ما هو نموذج مربع CSS؟ينطبق نموذج مربع CSS الكامل على المربعات المحظورة، وتستخدم المربعات المضمنة فقط بعض السلوكيات المحددة في نموذج الصندوق. يحدد النموذج كيفية عمل الأجزاء المختلفة للمربع - الهامش والحد والحشو والمحتوى - معًا لإنشاء مربع يمكنك رؤيته على الصفحة. ولإضافة بعض التعقيد الإضافي، يوجد نموذج قياسي ونموذج بديل. أجزاء من الصندوقتكوين مربع كتلة في CSS لدينا: ويوضح الرسم البياني أدناه هذه الطبقات: نموذج مربع CSS القياسيفي نموذج الصندوق القياسي، إذا أعطيت صندوقًا عرضًا وارتفاعًا، فإن هذا يحدد عرض وارتفاع المربع مربع المحتوى. تتم بعد ذلك إضافة أي حشوة وحدود إلى هذا العرض والارتفاع للحصول على الحجم الإجمالي الذي يستهلكه الصندوق. وهذا يظهر في الصورة أدناه. إذا افترضنا أن الصندوق يحتوي على تعليمات CSS التالية التي تحدد العرض والارتفاع والهامش والحدود والحشوة: الصندوق (العرض: 350 بكسل؛ الارتفاع: 150 بكسل؛ الهامش: 25 بكسل؛ الحشو: 25 بكسل؛ الحد: 5 بكسل أسود خالص؛) المساحة التي يشغلها صندوقنا باستخدام نموذج الصندوق القياسي ستكون في الواقع 410 بكسل (350 + 25 + 25 + 5 + 5)، والارتفاع 210 بكسل (150 + 25 + 25 + 5 + 5)، حيث أن الحشو والحدود هما تمت إضافته إلى العرض المستخدم لمربع المحتوى.
ملحوظة: لا يتم احتساب الهامش ضمن الحجم الفعلي للمربع - تأكد من أنه يؤثر على المساحة الإجمالية التي سيشغلها المربع على الصفحة، ولكن فقط المساحة خارج المربع. تتوقف مساحة الصندوق عند الحدود - ولا تمتد إلى الهامش. نموذج مربع CSS البديلقد تظن أنه من غير المناسب إضافة الحدود والحشو للحصول على الحجم الحقيقي للصندوق، وستكون على حق! لهذا السبب، كان لدى CSS نموذج صندوق بديل تم تقديمه في وقت ما بعد نموذج الصندوق القياسي. باستخدام هذا النموذج، أي عرض هو عرض المربع المرئي في الصفحة، وبالتالي فإن عرض منطقة المحتوى هو ذلك العرض مطروحًا منه عرض الحشو والحدود. نفس CSS المستخدم أعلاه سيعطي النتيجة أدناه (العرض = 350 بكسل، الارتفاع = 150 بكسل).
بشكل افتراضي، تستخدم المتصفحات نموذج الصندوق القياسي. إذا كنت تريد تشغيل النموذج البديل لعنصر ما، فيمكنك القيام بذلك عن طريق تعيين حجم المربع: مربع الحدود عليه. من خلال القيام بذلك، فإنك تطلب من المتصفح أن يأخذ مربع الحدود باعتباره المنطقة المحددة بأي حجم تقوم بتعيينه. الصندوق (حجم الصندوق: صندوق الحدود؛) إذا كنت تريد أن تستخدم جميع عناصرك نموذج الصندوق البديل، وكان هذا خيارًا شائعًا بين المطورين، فقم بتعيين خاصية تغيير حجم الصندوق على العنصر، ثم قم بتعيين جميع العناصر الأخرى لترث هذه القيمة، كما هو موضح في المقتطف أدناه. إذا كنت تريد فهم الفكرة وراء ذلك، راجع مقالة حيل CSS حول تغيير حجم الصندوق. html (حجم الصندوق: مربع الحدود؛) *, * ::قبل بعد(حجم الصندوق: وراثة؛)ملحوظة: جزء تاريخي مثير للاهتمام - اعتاد Internet Explorer على استخدام نموذج الصندوق البديل بشكل افتراضي، مع عدم وجود آلية متاحة للتبديل. اللعب بنماذج الصناديقفي المثال أدناه، يمكنك رؤية صندوقين. كلاهما لهما فئة .box، والتي تمنحهما نفس العرض والارتفاع والهامش والحدود والحشوة. والفرق الوحيد هو أن الصندوق الثاني قد تم ضبطه لاستخدام نموذج الصندوق البديل. هل يمكنك تغيير حجم المربع الثاني (عن طريق إضافة CSS إلى فئة .alternate) لجعله مطابقًا للمربع الأول في العرض والارتفاع؟ استخدم DevTools في المتصفح لعرض نموذج الصندوقلتعيين العرض واللون والنمط لكل جانب على حدة، يمكنك استخدام: لتعيين اللون أو النمط أو العرض لجميع الجوانب، استخدم ما يلي: لتعيين اللون أو النمط أو العرض لجانب واحد، يمكنك استخدام إحدى خصائص الكتابة الطويلة الأكثر دقة: في المثال أدناه، استخدمنا العديد من الاختصارات والأيدي الطويلة لإنشاء الحدود. قم بتجربة الخصائص المختلفة للتأكد من أنك تفهم كيفية عملها. تمنحك صفحات MDN الخاصة بخصائص الحدود معلومات حول أنماط الحدود المختلفة التي يمكنك الاختيار من بينها. للوهلة الأولى، قد يبدو تحديد موضع الكتل في CSS مهمة بسيطة. لكن في الممارسة العملية يتبين أن كل شيء أكثر تعقيدًا. لذلك، قبل دروس التخطيط العملي، افهم النظرية جيدًا. نموذج الكتلة وتحديد المواقع قليلا من التكرار. ذكر المقال أن جميع عناصر الكتلة مستطيلة الشكل. وهي موجودة على صفحة الويب الواحدة أسفل الأخرى - ويسمى هذا الترتيب لعناصر الكتلة بالتدفق العام. دعونا نلقي نظرة على موقع الكتلة كمثال. بريد إلكتروني في التدفق العام:
حاوية القسم وهذه هي الطريقة التي تبدو بها في المتصفح:
بالنسبة للكتل، قم بالإشارة إلى أحجام الهوامش والمسافات البادئة. يتم تحديد الحدود بينهما أيضًا، والتي ستكون أيضًا إطار الكتلة نفسها. تعمل هذه الحشوات وأحجام الحدود على تغيير الطول والعرض الأصليين للكتلة. يتم تحديد ترتيب الموضع في CSS بواسطة خاصية الموضع. تحتوي خاصية الموضع على خمس قيم: تتمثل مهام تحديد الموقع في وضع عنصر الكتلة في مكان محدد بدقة وتحديد تأثيره على العناصر الأخرى الموجودة حوله. تحديد المواقع النسبية لكن المكان الذي تركه العنصر لم تتم إزالته من التدفق العام. بعد انتقالها إلى موضع آخر، لا تزال الكتلة تؤثر على هياكل الويب المجاورة كما لو أنها ظلت في مكانها. الموقف:نسبي؛ انظر الآن إلى لقطة الشاشة.
كما ترون، انتقل div إلى اليمين وإلى الأسفل بالنسبة إلى إحداثياته السابقة. تبقى كتلة li في نفس المكان. خصوصية القيمة النسبية المذكورة أعلاه تمنعه من الارتقاء إلى المقعد الشاغر. ولكن هناك ميزة أخرى لتحديد المواقع النسبية. تتداخل كتلة div مع جزء من العنصر السفلي، وقد تم ذلك عن قصد من أجل الوضوح. تتيح لك هذه الميزة تركيب عنصر تصميم على عنصر آخر. نظرت هذه المقالة فقط في تحديد المواقع النسبية. سيتم عرض باقي قيم خصائص موضع CSS في المقالة التالية. غالبًا ما يتم استخدام تخطيط الكتلة عند إنشاء موقع ويب أو مدونة. ونتيجة لذلك، غالبًا ما يكون من الضروري وضع مسافة بادئة للكتل. لهذا السبب، حول كيفية وضع مسافة بادئة في CSSالموصوفة بالتفصيل في هذا الدرس. بالنسبة للمتصفح، كل علامة عبارة عن حاوية تحتوي على محتوى وحشوة وهوامش خارجية وحدود. في هذا الدرس سوف نتعلم كيفية عمل مسافات بادئة داخلية وخارجية، ونأخذ في الاعتبار معالمها الرئيسية. يوضح الشكل أدناه بوضوح معلمات المسافة البادئة للكتلة: كما ترون، يمكن عمل مسافة بادئة في أربعة اتجاهات: مسافة بادئة علوية (أعلى)، مسافة بادئة سفلية (أسفل)، مسافة بادئة يسرى (يسار) ومسافة بادئة يمنى (يمين). يمكن أن تكون وحدات القياس عبارة عن بكسلات ونسب مئوية ووحدات CSS أخرى - تعرف على المزيد عنها. يستخدم هذا البرنامج التعليمي وحدات البكسل. حشوة الكتلةالخاصية المسؤولة عن الحشو في CSS هي حشوة. لذلك، دعونا نلقي نظرة على مثال لإعداد الحشو الداخلي لكتلة: الحشو العلوي: 5 بكسل؛ /*الحشوة العلوية*/ الحشوة اليسرى: 8px; /*الحشوة اليسرى*/ الحشوة اليمنى: 8px; /*الحشوة اليمنى*/ الحشوة السفلية: 5px; /*الحشوة السفلية*/ في هذا المثال، يتم تعيين الحشو بشكل منفصل لكل جانب من الكتلة. بالإضافة إلى ذلك، هناك عدة طرق لتعيين المسافة البادئة في CSS: الهامش: 5px 8px 5px 8px؛ /*الهوامش العلوية، اليمنى، السفلية، اليسرى*/ هامش: 5px 8px 5px; /*يصف الهوامش العلوية، اليسرى، اليمنى، السفلية*/ هامش: 5px 8px; /*يصف الهوامش العلوية والسفلية واليمنى واليسرى*/ هامش: 7px; /*يصف كل المساحة المتروكة بحجم 7 بكسل*/ من الأسهل تذكر الطريقتين الأولى والأخيرة. في الحالة الأولى، يتم وضع المسافات البادئة في اتجاه عقارب الساعة (أعلى، يمين، أسفل، يسار) - يمكننا تحديد أي مقدار من المسافة البادئة؛ في الحالة الأخيرة، ستكون المسافات البادئة على جميع الجوانب هي نفسها. حظر الهوامشالخاصية المسؤولة عن الهوامش في CSS هي هامِش. أمثلة على الهوامش في CSS: الهامش العلوي: 5 بكسل؛ /*الهامش العلوي*/ الهامش الأيسر: 10px; /*الهامش الأيسر*/ الهامش الأيمن: 10px; /*الهامش الأيمن*/ Margin-bottom: 5px; /*الهامش السفلي*/ الحشو: 5px 10px 5px 10px؛ /*الهوامش العلوية، اليمنى، السفلية، اليسرى*/ الحشو: 5px 10px 5px; /*يصف الحشو العلوي واليسار واليمين والسفلي*/ الحشو: 5px 10px; /*يصف الحشو العلوي والسفلي واليمين واليسار*/ الحشو: 7px; /*يصف جميع الهوامش مقاس 7 بكسل*/ هكذا، كيفية وضع مسافة بادئة في CSS- السؤال ليس صعبا، ولكنه وثيق الصلة بالموضوع. لفهم المعلومات الموضحة أعلاه بشكل أفضل، يجب أن تتذكر أن هناك خاصيتين: الحشو - المسافات البادئة الداخلية والهامش - المسافات البادئة الخارجية. كما تعلم أيضًا، هناك عدة طرق لتعيين المسافات البادئة، يمكنك استخدامها. |
