الحشو لي المغلق. ترتيب الهوامش والحشو في CSS

عند إنشاء كتلة تحتوي على قائمة روابط، يوصى عمومًا باستخدام خاصية العرض مع سمات الكتلة أو الكتلة المضمنة، مما سيؤدي إلى زيادة حجم حقل الارتباط النشط. تعمل حقول الارتباط النشطة الكبيرة على تحسين إمكانية استخدام العناصر، كما يسهل التنقل في العناصر الكبيرة باستخدام الماوس.

العناصر مع العرض: يتم عرض الكتلة كعناصر كتلة.

عنصر مع العرض: يتم عرض inline-block كعنصر كتلة يلتف حول العناصر الأخرى كما لو كان مضمّنًا. يتم تنسيق المحتوى كعنصر كتلة، ويتم تنسيق العنصر نفسه كعنصر مضمن.

دعونا نلقي نظرة على مثال بسيط مع قائمة الروابط:

• هذا القليل
• ذهب أصبع ل
• سوق

إذا لم تقم بتغيير نمط الروابط، فإن حجم حقولها النشطة يتوافق مع حجم النص الموجود بداخلها.

يمكننا تحسين ذلك عن طريق جعل حجم الحقل النشط يساوي عرض العنصر الأصلي.

Ul a (العرض: كتلة؛)

يمكننا أن نفعل ما هو أفضل.

1. تأكد من أن عناصر القائمة لا تحتوي على حقول، على عكس الروابط.
2. الروابط لا تحتوي على هوامش لأن الهوامش ليست المنطقة النشطة للعناصر.

ul li (الحشوة: 0; الهامش: 0;) ul a (الحشوة: 5px; العرض: كتلة;)

تتكون المقالة من أشياء واضحة، ولكن في كثير من الأحيان يمكننا العثور على كتل من الروابط على الإنترنت لا يتم "تشويهها" بواسطة الحقول النشطة الموسعة.

المقال الأصلي: احتفظ بالهوامش خارج قوائم الارتباط بقلم: كريس كويير بتاريخ 29/11/2010

مهمة

قم بإزالة المساحة المتروكة حول القوائم ذات التعداد النقطي أو المرقّم.

حل

استخدم خاصية نمط الهامش والحشو بقيمة فارغة لمحدد UL أو OL، اعتمادًا على نوع القائمة، كما هو موضح في المثال 1.

مثال 1: المسافة البادئة للقائمة

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

• تشيبوراشكا
• تمساح جينا
• شابوكلياك

---

وتظهر نتيجة هذا المثال في الشكل. 1.

أرز. 1. قائمة بدون مسافات بادئة رأسية وأفقية

لاحظ أن علامات القائمة التي تظهر على الحافة اليسرى لصفحة الويب تختفي. لإزالة الهوامش العلوية والسفلية فقط دون نقل القائمة إلى اليسار، استخدم خصائص الهامش العلوي والهامش السفلي (المثال 2).

مثال 2: المسافة البادئة للقائمة

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

• تشيبوراشكا
• تمساح جينا
• شابوكلياك

---

ما هي المتصفحات التي يتم تثبيتها افتراضيًا؟ غالبًا ما يُطرح سؤال مماثل بين مصممي التخطيط المبتدئين الذين يرغبون في إزالة هذه المسافات البادئة من عناصر مثل جداول HTML (العلامة) وخلاياها، وما إلى ذلك. في الواقع، لا يوجد شيء أسهل، ولكن أولا دعونا نفهم: هل تقصد المسافات البادئة عندما تبحث عن إجابة لهذا السؤال؟

هناك نوعان من الخصائص في CSS التي تتحكم في الحشو (CSS) والهوامش (CSS) للعناصر. مواقعهم موضحة في الصورة التالية:

لذلك، عندما يقول العديد من المبتدئين أنهم يريدون إزالة الحشو من عنصر ما، فإنهم يقصدون في الواقع هوامشه، لأن هذا هو ما تضيفه المتصفحات عادةً إلى بعض العناصر. لا، تتم إضافة المسافات البادئة، بالطبع، ولكن هناك عدد قليل جدًا من هذه العناصر، على سبيل المثال، تقوم العلامات والمتصفحات بتعيين مسافات بادئة غير صفرية بحيث لا يتناسب النص الموجود على الأزرار بشكل وثيق مع الإطار.

يختلف الوضع قليلاً بالنسبة لجداول HTML، حيث أنها تحتوي على معلمتين إضافيتين - خاصية CSS التي تغير المسافة بين حدود أو إطارات الخلايا (والتي يمكن أن تسمى أيضًا الحشو) وخاصية CSS التي تزيل هذه المسافة تمامًا وتجعل الحدود مشتركة. توضح الصورة أدناه موضع كل هذه الهوامش والحشوات على الطاولة.

ما تحتاج إلى الاهتمام به هنا. حسنًا، أولاً، بالنسبة لخلايا الجدول، لا توجد حقول بالمعنى المعتاد، وبدلاً من ذلك يتم استخدامها، وثانيًا، تحتوي العلامة على هوامش ومسافات بادئة، مثل عنصر HTML عادي. حسنًا، ثالثًا، تتكون المسافة البادئة من الحافة الداخلية للجدول إلى الخلايا من حجم المسافة البادئة الداخلية للجدول، والتي يضاف إليها حجم المسافة بين الخلايا.

حسنًا، الآن بعد أن عرفت كل هذا، دعنا نلقي نظرة على بعض الأمثلة.

كيفية إزالة الهوامش من حواف صفحة HTML

مثال HTML وCSS: إزالة المسافات البادئة من علامة BODY

محتوى الصفحة.

وصف المثال

وصف المثال

لتصميم القوائم بشكل مرئي، تقوم جميع المتصفحات الشائعة بتعيين الهوامش والمسافات البادئة للعلامة، كما تقوم بتعيين الهوامش في الأعلى والأسفل فقط (مثل الفقرات)، والمسافة البادئة الداخلية فقط على اليسار لنقل عناصر القائمة إلى اليمين. ومع ذلك، من أجل الموثوقية، تمت إزالة الهوامش والحشوة أيضًا من العلامة، في حالة ما إذا قرر بعض المتصفحات التصرف بشكل مختلف عن أي متصفح آخر. بالمناسبة، هذا النهج يسمى إعادة تعيين CSS، يمكنك قراءتها.

كيفية إزالة المسافات البادئة من الجدول

مثال HTML وCSS: إزالة الحشو بين خلايا الجدول

الخلية 1.1	الخلية 1.2
الخلية 2.1	الخلية 2.2

الخلية 1.1	الخلية 1.2
الخلية 2.1	الخلية 2.2

الخلية 1.1	الخلية 1.2
الخلية 2.1	الخلية 2.2

وصف المثال

لمزيد من الوضوح، تمت إضافة الإطارات إلى الجداول والخلايا. لم أقم بتطبيق أي أنماط خاصة على الجدول الأول، بحيث يمكنك أن ترى أن المتصفحات بشكل افتراضي لا تضيف أي هوامش أو حشوة إلى الجداول، ولكنها تحدد فقط مسافة صغيرة بين الخلايا. هذا هو ما سنقوم بتنظيفه.

تم تطبيق خاصية CSS:collapse على الجدول الثاني بحيث أصبحت حدود الخلايا المجاورة مشتركة. ولكن في الثالثة، تم إعادة تعيين المسافة بين الخلايا ببساطة إلى الصفر، لكن حدودها (الإطارات) ظلت في مكانها، وهذا واضح للغاية من خلال سماكة الإطارات المميزة. وبطبيعة الحال، في الواقع، لم يحدث أي سماكة، الإطارات الموجودة في الطاولة ببساطة "تشبثت" ببعضها البعض.

بشكل عام، كما ترون، تساعد كلتا الطريقتين على إزالة المسافات البادئة في الجدول، لكنهما تفعلان ذلك بشكل مختلف قليلاً.

تعد الكتل المضمنة (الكتل المضمنة) في كثير من الحالات أداة ترميز مريحة للغاية. يمكن العثور على أمثلة لاستخدامها في المقالات.

وفي الوقت نفسه، هناك مأزق مرتبط بهم. أود أن أقول حتى حصاة كاملة. هل تريد رؤيته؟ ضع عدة عناصر مضمنة (أو كتل مضمنة) على التوالي.

لنفترض أن لدينا HTML هذا:

• ستوركي.
• فقط
• خطوط

جعل العناصر صغيرة:

لي (عرض: مضمن؛)

...أو كتل الخط:

Li(display:inline-block; /* السطران التاليان لـ IE6-7 - يحاكيان سلوك الكتلة المضمنة */ //display:inline; Zoom:1; )

مشكلة

تفصل معظم المتصفحات الكتل (العناصر) المضمنة عن طريق المسافة البادئة. لسهولة الإدراك، قمت بتلوين الكتل قليلاً.

أُووبس! أي نوع من المسافات البادئة؟ لم أصف أي شيء من هذا القبيل!

دعنا نتفق على أنني سأكتب فيما يلي ببساطة "كتلة مضمنة"، وأعني "كتلة مضمنة ( :inline-block) أو مجرد عنصر مضمن (display:inline)"، نظرًا لأن لديهم مشكلة شائعة تمامًا ويتم التعامل معها أيضًا بنفس الطريقة طريق.

من نعالج؟

لذا فإن الكتل المضمنة لديها الآن مسافات بادئة غامضة. وبطبيعة الحال، هذا لا ينطبق فقط على القوائم. المجموعة الموجودة في صف واحد، على سبيل المثال، "ov"، سوف تتصرف بنفس الطريقة.

لكي نكون منصفين، تجدر الإشارة إلى أن IE6 وIE7 سيعرضان الأمر برمته بدون مسافة بادئة:

هذه هي الطريقة التي أريد أن تظهر بها جميع المتصفحات!

لن نخوض في تفاصيل مسألة من هو على حق ومن هو على خطأ (اقرأ - يدعم المعايير بشكل ملتوي)، وسنحقق ببساطة التوافق عبر المستعرضات. إنه أمر مريح للغاية عندما يكون السلوك متوقعًا - لم أقم بتعيين أي مسافات بادئة، مما يعني أنني لست بحاجة إلى رسمها!

في الواقع، كل شيء بسيط - لإزالة المسافات البادئة، عليك أن تفهم من أين أتوا!

من أين تأتي المسافات البادئة؟

وليس من الصعب أن نفهم. يكفي فقط كتابة العلامات في سطر واحد:

• ستوركي.
• فقط
• خطوط

معجزات! اختفت المسافات البادئة من تلقاء نفسها! الخلاصة: يتم إنشاؤها بواسطة أحرف غير مرئية بين العلامات - الواصلة أو المسافة.

بالطبع، "كتابة كل شيء في سطر واحد"، على الرغم من أنه حل عبر المتصفحات للمشكلة، لا يؤخذ في الاعتبار هنا، لأسباب واضحة (من يكتب بدون مسافات بادئة؟). نحن نبحث عن طرق أخرى.

يسقط مع المسافات البادئة!

نظرًا لأن المسافة البادئة يتم إنشاؤها بواسطة أحرف من الحاوية، ستكون الفكرة المعقولة هي "تحييد" هذه الأحرف - اضبطها على :0؛ (الشيء الرئيسي هو عدم نسيان أن هذه الخاصية موروثة ومقاطعتها للأحفاد أنفسهم):

Ul (حجم الخط: 0؛) li (حجم الخط: 14 بكسل؛ العرض: مضمن؛)

الحل الأمثل! يتم ضغط كتل الخط حقًا ضد بعضها البعض. لا تزال هناك مشكلة تجميلية صغيرة: في بعض المتصفحات (على سبيل المثال، Opera 9.5 والإصدارات الأقدم) توجد مسافة بادئة في الأعلى أو الأسفل داخل الأصل (الأصل في الصورة مملوء باللون الرمادي والأخضر الباهت):

تم تكبير الصورة بحيث يمكن رؤية المسافات البادئة الرأسية

هذه المشكلة مشابهة لتلك الموضحة في المقالة، ويتم التعامل معها بنفس الطريقة تقريبًا: add :0; (مرة أخرى، لا تنس أن تتداخل مع السليل). لذلك نحصل على:

Ul ( حجم الخط: 0؛ ارتفاع الخط: 0؛ ) لي ( حجم الخط: 14 بكسل؛ ارتفاع الخط: عادي؛ /* أو قيمة أخرى مناسبة */ العرض: مضمن؛ )

هل كل شيء على ما يرام ومدهش الآن؟ ليس كذلك!

جاءت المشكلة من حيث لم نتوقعها

على ما يبدو، يجب أن تكون هذه المسافات البادئة موجودة بالفعل! هناك حجتان قويتان لدعم هذا:

1. IE6-7 لا يرسمهم؛
2. على الرغم من جهودنا، لا تزال متصفحات Webkit تجذبهم.

نعم نعم! كل من Safari وChrome، بعد كل الحيل المذكورة أعلاه، مصممان ببساطة لتقليل المساحة المتروكة من ثلاثة بكسل إلى واحد!

مجموعة الويب العنيدة لا تريد الاستسلام!

تحديث 3.07.2011 بواسطة نيك. قدم FF مفاجأة مخفية أخرى. إذا قمت بقياس الصفحة، في بعض الأحيان يكون هناك حشوة إضافية بحجم 1 بكسل في الأعلى. يمكن علاج ذلك عن طريق إضافة قاعدة العرض: -moz-inline-stack;

قرار نهائي

كان من الممكن التغلب على webkit باستخدام :-1px. ومع ذلك، لم يتم العثور على أي آثار جانبية ضارة (إلا إذا نسيت تجاوز الخاصية في السلالات بالطبع).

CSS النهائي مع حل عبر المستعرضات للعناصر المضمنة:

Ul( حجم الخط:0; /* إزالة التباعد الأفقي */ ارتفاع الخط:0; /* ... والعمودي في بعض المتصفحات */ تباعد الحروف:-1px; /* إقناع مجموعة أدوات الويب */ ) li ( الخط -الحجم:14 بكسل; /* لا تنس استعادة القيم العادية ​​*/ ارتفاع الخط: عادي; تباعد الأحرف: عادي; العرض:مضمن; )

للكتل المضمنة:

Ul( حجم الخط:0; /* إزالة التباعد الأفقي */ ارتفاع الخط:0; /* ... والعمودي في بعض المتصفحات */ تباعد الحروف:-1px; /* إقناع مجموعة أدوات الويب */ ) li ( الخط -الحجم:14 بكسل؛ /* لا تنس استعادة القيم العادية */ ارتفاع الخط: عادي؛ تباعد الحروف: عادي؛ العرض: -moz-inline-stack!مهم؛ العرض:inline-block؛ // العرض: مضمن؛ التكبير/التصغير: 1؛)

لا تنس أن خاصية التكبير/التصغير غير صالحة. لذلك، في ظروف القتال، ضعه في CSS منفصل، متصل باستخدام .

 

قد يكون من المفيد أن تقرأ:

• البريد الروسي تتبع الطرود;
• ملحق أدوات علي لـ Yandex;
• يقوم Excel بإلغاء حماية ورقة دون معرفة كلمة المرور؟;
• محول DVI-D VGA: نتحدث عن الميزات والأنواع والمشكلات المحتملة التي قد تنشأ أثناء الاستخدام;
• ما هو BIOS على جهاز الكمبيوتر - دعونا نتعرف عليه;
• المعالج لمنفذ lga 775;
• إضافة ملحقات إلى Microsoft Edge ملحقات Microsoft edge;
• تعطيل لوحة اللمس على جهاز كمبيوتر محمول كيفية تعطيل الماوس على كمبيوتر محمول من نوع Acer;