اهلا بك في مدونتي. يوفر Css (أوراق الأنماط المتتالية) الكثير من خيارات التخصيص مظهرصفحات الانترنت. اليوم أود أن أعرض بإيجاز كيفية تحديد الحشو في الأعلى أو على أي جانب آخر لأي عنصر في CSS.
هامِش
يتم تعيين الهامش باستخدام خاصية الهامش. بمساعدتها، يمكنك تعيين الهوامش على الجوانب الأربعة في وقت واحد، أو استخدام خصائص أخرى: هامش أعلى، هامش يسار، هامش يمين، هامش أسفل، والتي تتيح لك جعلها على جانب واحد فقط.
يحدد الهامش المسافة التي سيتم بها إزاحة الحافة المحددة لعنصر ما عن العناصر الأخرى الموجودة في الصفحة. على سبيل المثال الإدخال:
ف، شعبة (
الهامش العلوي: 20 بكسل؛
}
وهذا يعني أنه سيتم وضع مسافة بادئة لجميع الكتل والفقرات في الأعلى بمقدار 20 بكسل، أي أن حافتها العلوية ستبتعد عن العناصر المجاورة لها بهذه المسافة.
يمكن كتابة الهوامش على كل جانب باستخدام خاصية هامش واحدة فقط، تُكتب عليها 4 قيم متتالية:
القسم(
الهامش: 20 بكسل 10 بكسل 20 بكسل 10 بكسل؛
}
سيتم إعطاء الحشو من الحواف العلوية واليمنى والسفلية واليسرى على التوالي. وبما أنهما في هذه الحالة متساويان في الجانبين المتقابلين، فيمكننا أيضًا كتابتها على النحو التالي:
القسم(
الهامش: 20 بكسل 10 بكسل؛
}
القيمة الأولى هي الهامش في الأعلى والأسفل، والثانية هي الهامش على الجانبين.
المسافة الفارغة
تعمل الحشوة الداخلية بشكل مختلف - فهي لا تحرك الكتلة بعيدًا عن العناصر الأخرى، ولكنها تضيف تلك المساحة داخل العنصر، مما يؤدي إلى نقل محتوى الكتلة بعيدًا عن حوافها. انها مريحة. أين شاهدت موقع ويب حيث يبدأ النص في أعلى يسار النافذة؟
لم أر هذا لأن مطوري الويب يستخدمون دائمًا ملفات خارجية و حشوةبحيث يمكن قراءة النص بشكل مريح قدر الإمكان. يتم تحديد الحشو الداخلي باستخدام خاصية الحشو، حيث يمكن إدراج 4 قيم مرة واحدة، مفصولة بمسافة، لجميع الحواف، على التوالي.
أيضًا، كما هو الحال مع الهامش، يمكنك إضافة اسم الجانب وتعيين المسافة له فقط. على سبيل المثال، يمكن كتابة الحشو العلوي باستخدام الحشو العلوي. بشكل عام، تعمل خاصية الحشو تمامًا مثل خاصية الهامش.
على سبيل المثال، يمكنك إعطاء هذا الجزء من التعليمات البرمجية:
حاجز(
العرض: 200 بكسل؛
الحشو: 20 بكسل؛
}
في رأيك، ماذا سيكون العرض الفعلي لعنصرنا؟ هنا يمكنك أن ترى أنها 200 بكسل، لكن الحشوات تضيف 20 بكسل أخرى على كل جانب، ليصبح المجموع 240 بكسل. خذ هذا في الاعتبار عند التصميم.
أود أيضًا أن أشير إلى أن الحشو يُعطى عادةً فقط للعناصر المحظورة؛ ومن الأفضل عدم إعطائه للعناصر المضمنة. الهامش يعمل بشكل جيد مع أي عناصر.
كان تخطيط CSS دائمًا مستطيلًا. أي خطوط ناعمة هي من اختصاص المطور. توفر قواعد النمط خيارات كافية لمنح الصفحة شكلاً سلسًا ضمن حدود دقة الشاشة. لكن أي عنصر تخطيط هو دائمًا مستطيل يخضع ترتيب المعلومات فيه لقواعد CSS.
تعد الحشوة على جميع الجوانب مهمة لكل عنصر في الصفحة عندما يتم تحديد موضعها بشكل مطلق، ويتم تعريف الحشوة العلوية في CSS خصيصًا لأنها مهمة للعناصر المختلفة، خاصة العناصر المضمنة.
قواعد تحديد المواقع الأساسية
يحتوي عنصر الكتلة على قاعدة هامش، وقاعدة تعبئة للعناصر الموجودة بداخله، وعرض حد يمكن استخدامه أيضًا.
المسافة البادئة في الأعلى لها أهمية خاصة. يربط CSS داخل الكتلة قواعد الحشو بقواعد العناصر المطلقة والموضعية نسبيًا داخل تلك الكتلة.
من الممارسات الشائعة لقواعد CSS: يمكنك تحديد المساحة المتروكة على جميع الجوانب بالتساوي، في أزواج من الأعلى/الأسفل واليمين/اليسار، أو لكل جانب على حدة. على سبيل المثال،
- الهامش: 10 بكسل؛
- الحشو: 10px20px؛
- الحشو: 10px20px30px40px.
في الحالة الأولى، يتم تعيين المسافة البادئة للعنصر من جوانب الحاوية الخارجية التي يقع فيها. في الحالة الثانية، الهوامش في الأعلى والأسفل هي 10 بكسل، وعلى اليسار واليمين - 20 بكسل. في الحالة الثالثة، يتم الإشارة إلى حجم المسافات البادئة من جميع الجوانب: الأعلى واليمين والأسفل واليسار.
في كل هذه الحالات، المسافة البادئة أعلى CSS هو 10 بيكسل.
القواعد التي تغير موضع العناصر
إذا لم يتم تحديد موضع عنصر التخطيط بشكل مطلق، فسيتم وضعه بالترتيب العام لتكوين الصفحة.
إذا قمنا بتحديد الحشو في الجزء العلوي من CSS في عنصر scCurrInfo، سيتم تحقيق الهدف، ولكن إذا كان على مستوى li فلن يتم ذلك.
في هذا المثال، باستخدام قاعدة الحشو: 40px; يتطلب تقليلًا مناسبًا لقواعد العرض والارتفاع بمقدار 80 بكسل. وإلا فإن حجم كتلة scCurrInfo سيتجاوز حدود الكتلة الخارجية.
إذا قمنا بإزالة قاعدة الحشو من وصف scCurrInfo، ولكن أضفناها بقيمة 20 بكسل إلى وصف نمط عنصر القائمة، فلن نحصل إلا على المسافة البادئة العلوية. لن تطبق CSS هذه القيمة على الأطراف الأخرى.
وبطبيعة الحال، ينطبق هذا الاستخدام لقاعدة المسافة البادئة على كل عنصر li.
الممارسات العامة لتنسيق المحتوى
يحقق بعض المطورين الكمال من خلال تخطيط الصفحات باستخدام عناصر الكتلة. على ما يبدو، هذه ممارسة كلاسيكية - البدء بالجداول وإنهاء العملية التعليمية الخاصة بك بالمكعبات.
الحرية المتأصلة في تخطيط الكتلة رائعة، وقد لا يكون خيال المطور مقيدًا بقواعد الجدول الصارمة: الصفوف فقط، والخلايا فقط، التي يتم دمجها أفقيًا وعموديًا فقط. لا شيء غريب على الأفكار العلائقية.
وفي الوقت نفسه، الجداول، بالإضافة إلى العيوب الواضحة، لديها العديد من المزايا النوعية. عند إنشاء الحشو في الأعلى، يأخذ CSS في الاعتبار الحشو الموجود على اليسار واليمين (الأسفل هو لحظة خاصة). تسمح لك قواعد خلايا الجدول بالتحكم في المحاذاة الرأسية والأفقية. باستخدام أنماط الصفوف ودمجها مع أنماط الخلايا، يمكنك إنشاء طرق عرض معقدة للمحتوى.
إن التمثيل المعتاد للصفحة على شكل مستطيلات لا يمنع على الإطلاق من تقديمها على شكل جدول. هذه أيضًا مستطيلات، ولكنها أيضًا خلايا جدول، أي أن لها قواعدها الخاصة التي تكمل قواعد الكتل.
تحديد المواقع المطلقة
منع مع القاعدة POSITION: مطلق؛ سيكون موجودًا في موقع تحدده إحداثياته بالنسبة للكتلة التي يقع فيها.
صفة مميزة قواعد CSS- "يمارس - أفضل معيارالحقيقة" في معظم الحالات، خاصة عندما يكون التوافق عبر المستعرضات مطلوبًا ويتم التخطيط يدويًا، فمن الأفضل دراسة الأدلة الكاملة على أوراق الأنماط المتتالية.
غالبًا ما يؤدي استخدام الجداول إلى حدوث مشكلات في تغيير محتوى الخلية. لا يؤثر الإزاحة المماثلة داخل الكتلة دائمًا على جميع العناصر. من خلال التجربة، يمكنك تحقيق النتيجة المرجوة. مهمة تافهة: كيف لا تعد إزالة الحشوة العلوية دائمًا حلاً تافهًا لـ CSS.
في بعض الحالات، عندما يتعين عليك تخطيط عناصر الصفحة في أحشاء بعض أنظمة إدارة محتوى مواقع الويب الشهيرة، لا تزال بحاجة إلى الاهتمام ليس فقط بالممارسة التجريبية، ولكن أيضًا بالنظر إلى تجربة زملائك.
وصف
يضبط مقدار المسافة البادئة من الحافة اليمنى للعنصر. الحشو هو المسافة من الحافة الخارجية للحد الأيمن للعنصر الحالي إلى الحد الداخلي للعنصر الأصلي (الشكل 1).
بناء الجملة
الهامش الأيمن: القيمة | تلقائي | يرث
قيم
يمكن تحديد مقدار المساحة المتروكة اليمنى بالبكسل (px) أو النسبة المئوية (%) أو الوحدات الأخرى المقبولة لـ CSS. يمكن أن تكون القيمة رقمًا موجبًا أو سالبًا.
Auto يحدد أنه سيتم حساب مقدار المسافة البادئة تلقائيًا بواسطة المتصفح. يرث يرث قيمة الوالد.
HTML5 CSS2.1 IE Cr Op Sa Fx
وتظهر نتيجة هذا المثال في الشكل. 2.
أرز. 2. تطبيق خاصية حق الهامش
نموذج الكائن
document.getElementById("elementID").style.marginRight
المتصفحات
المتصفح متصفح الانترنت 6 يضاعف قيمة الحشو اليسرى أو اليمنى للعناصر العائمة المتداخلة داخل العناصر الأصلية. يتم مضاعفة الهامش المجاور لجانب الوالدين. عادةً ما يتم حل المشكلة عن طريق إضافة العرض: سطريًا إلى العنصر العائم.
لا تدعم إصدارات Internet Explorer حتى الإصدار 7.0 بما في ذلك القيمة الموروثة.
وصف
خاصية CSSهامش أعلى يعين الهامش في الجزء العلوي من العنصر. الحشو هو المسافة من الحافة الخارجية للحد العلوي للعنصر الحالي إلى الحد الداخلي للعنصر الأصلي أو إلى حد العنصر الذي فوقه. يرجى ملاحظة أن العناصر المضمنة (display: inline;) يمكن أن تحتوي على الهوامش اليسرى واليمنى فقط.
يمكن تحديد حجم الحشو العلوي الخارجي بالبكسل (px) أو النسبة المئوية (٪) أو وحدات CSS الأخرى. يمكن أن تكون القيمة إيجابية أو سلبية.
ملحوظة: الهامش السفلي أو العلوي عنصر الطفليمكن أن يؤثر على الارتفاع الإجمالي للعنصر الأصلي ما لم يكن له حجم ارتفاع ثابت.
دمج الحقول
- يتم دمج حقول العناصر الشقيقة الموجودة أسفل بعضها البعض والموجودة في تدفق المستند في حقل واحد مشترك. ارتفاع الحقل الناتج يساوي ارتفاع الحقل الأكبر، على سبيل المثال: الحقل العنصر العلوي(الهامش السفلي) هو 10 بكسل والعنصر السفلي (الهامش العلوي) هو 20 بكسل، وسيكون ارتفاع الهامش الفردي في هذه الحالة 20 بكسل.
- يتم دمج هوامش العنصر الأصلي والعنصر الفرعي الموجود في تدفق المستند إذا كان العنصر الأصل لا يحتوي على أي شيء يفصل هامشه عن هامش العنصر الفرعي (الحدود أو الحشو أو المحتوى المضمن). أيضًا، لن يتم دمج الحقول إذا تم تعيين خاصية التجاوز الخاصة بالعنصر الأصلي على مخفي أو تلقائي. ميزة هذه الطريقة هي عدم زيادة حجم العنصر الأصلي.
غالبًا ما يتم استخدام تخطيط الكتلة عند إنشاء موقع ويب أو مدونة. ونتيجة لذلك، غالبًا ما يكون من الضروري وضع مسافة بادئة للكتل. لهذا السبب، حول كيفية وضع مسافة بادئة في 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- السؤال ليس صعبا، ولكنه وثيق الصلة بالموضوع. لفهم المعلومات الموضحة أعلاه بشكل أفضل، يجب أن تتذكر أن هناك خاصيتين: الحشو - المسافات البادئة الداخلية والهامش - المسافات البادئة الخارجية. كما تعلم أيضًا، هناك عدة طرق لتعيين المسافات البادئة، يمكنك استخدامها.
