غالبًا ما يتم استخدام تخطيط الكتلة عند إنشاء موقع ويب أو مدونة. ونتيجة لذلك، غالبًا ما يكون من الضروري وضع مسافة بادئة للكتل. لهذا السبب، حول كيفية وضع مسافة بادئة في CSSالموصوفة بالتفصيل في هذا الدرس. بالنسبة للمتصفح، كل علامة عبارة عن حاوية تحتوي على محتوى وحشوة وهوامش خارجية وحدود. في هذا الدرس سوف نتعلم كيفية عمل مسافات بادئة داخلية وخارجية، ونأخذ في الاعتبار معالمها الرئيسية.
يوضح الشكل أدناه بوضوح معلمات المسافة البادئة للكتلة:
كما ترون، يمكن إجراء المسافات البادئة في أربعة اتجاهات: مسافة بادئة علوية (أعلى)، مسافة بادئة سفلية (أسفل)، مسافة بادئة يسرى (يسار) ومسافة بادئة يمنى (يمين). يمكن أن تكون وحدات القياس عبارة عن بكسلات ونسب مئوية ووحدات CSS أخرى - تعرف على المزيد عنها. يستخدم هذا البرنامج التعليمي وحدات البكسل.
حشوة الكتلة
الخاصية المسؤولة عن الحشو في CSS هي حشوة. لذلك، دعونا نلقي نظرة على مثال لإعداد الحشو الداخلي لكتلة:
الحشو العلوي: 5 بكسل؛ /*الحشوة العلوية*/ الحشوة اليسرى: 8px; /*الحشوة اليسرى*/ الحشوة اليمنى: 8px; /*الحشوة اليمنى*/ الحشوة السفلية: 5px; /*الحشوة السفلية*/
في هذا المثال، يتم تعيين الحشو بشكل منفصل لكل جانب من الكتلة. بالإضافة إلى ذلك، هناك عدة طرق لتعيين المسافة البادئة في CSS:
الهامش: 5px 8px 5px 8px؛ /*الهوامش العلوية، اليمنى، السفلية، اليسرى*/ هامش: 5px 8px 5px; /*يصف الهوامش العلوية، اليسرى، اليمنى، السفلية*/ هامش: 5px 8px; /*يصف الهوامش العلوية والسفلية واليمنى واليسرى*/ هامش: 7px; /*يصف جميع الحشوات الداخلية بحجم 7 بكسل*/
من الأسهل تذكر الطريقتين الأولى والأخيرة. في الحالة الأولى، يتم وضع المسافات البادئة في اتجاه عقارب الساعة (أعلى، يمين، أسفل، يسار) - يمكننا تحديد أي مقدار من المسافة البادئة في الحالة الأخيرة، ستكون المسافات البادئة على جميع الجوانب هي نفسها.
حظر الهوامش
الخاصية المسؤولة عن الهوامش في CSS هي هامِش. أمثلة على الهوامش في CSS:
الهامش العلوي: 5 بكسل؛ /*الهامش العلوي*/ الهامش الأيسر: 10px; /*الهامش الأيسر*/ الهامش الأيمن: 10px; /*الهامش الأيمن*/ هامش أسفل: 5px; /*الهامش السفلي*/
الحشو: 5px 10px 5px 10px؛ /*الهوامش العلوية، اليمنى، السفلية، اليسرى*/ الحشو: 5px 10px 5px; /*يصف الحشو العلوي واليسار واليمين والسفلي*/ الحشو: 5px 10px; /*يصف الحشو العلوي والسفلي واليمين واليسار*/ الحشو: 7px; /*يصف جميع الهوامش التي يبلغ حجمها 7 بكسل*/
هكذا، كيفية وضع مسافة بادئة في CSS- السؤال ليس صعبا، ولكنه وثيق الصلة بالموضوع. لفهم المعلومات الموضحة أعلاه بشكل أفضل، يجب أن تتذكر أن هناك خاصيتين: الحشو - المسافات البادئة الداخلية والهامش - المسافات البادئة الخارجية. كما تعلم أيضًا، هناك عدة طرق لتعيين المسافات البادئة، يمكنك استخدامها.
اهلا بك في مدونتي. يوفر Css (أوراق الأنماط المتتالية) الكثير من خيارات التخصيص مظهرصفحات الانترنت. اليوم أود أن أعرض بإيجاز كيفية تحديد الحشو في الأعلى أو على أي جانب آخر لأي عنصر في CSS.
هامِش
يتم تعيين الهامش باستخدام خاصية الهامش. بمساعدتها، يمكنك تعيين الهوامش على الجوانب الأربعة في وقت واحد، أو استخدام خصائص أخرى: هامش أعلى، هامش يسار، هامش يمين، هامش أسفل، والتي تتيح لك جعلها على جانب واحد فقط.
يحدد الهامش المسافة التي سيتم بها إزاحة الحافة المحددة لعنصر ما عن العناصر الأخرى الموجودة في الصفحة. على سبيل المثال الإدخال:
ف، شعبة (
الهامش العلوي: 20 بكسل؛
}
وهذا يعني أنه سيتم وضع مسافة بادئة لجميع الكتل والفقرات في الأعلى بمقدار 20 بكسل، أي أن حافتها العلوية ستبتعد عن العناصر المجاورة لها بهذه المسافة.
يمكن كتابة الهوامش على كل جانب باستخدام خاصية هامش واحدة فقط، تُكتب عليها 4 قيم متتالية:
القسم(
الهامش: 20 بكسل 10 بكسل 20 بكسل 10 بكسل؛
}
سيتم إعطاء الحشو من الحواف العلوية واليمنى والسفلية واليسرى على التوالي. بما أنهما في هذه الحالة متساويان في الجانبين المتقابلين، فيمكننا أيضًا كتابتها على النحو التالي:
القسم(
الهامش: 20 بكسل 10 بكسل؛
}
القيمة الأولى هي الهامش في الأعلى والأسفل، والثانية هي الهامش على الجانبين.
المسافة الفارغة
تعمل الحشوة الداخلية بشكل مختلف - فهي لا تحرك الكتلة بعيدًا عن العناصر الأخرى، ولكنها تضيف تلك المساحة داخل العنصر، مما يؤدي إلى نقل محتوى الكتلة بعيدًا عن حوافها. انها مريحة. أين شاهدت موقع ويب حيث يبدأ النص في أعلى يسار النافذة؟
لم أر هذا لأن مطوري الويب يستخدمون دائمًا المسافات البادئة الخارجية والداخلية لتسهيل قراءة النص قدر الإمكان. يتم تحديد الحشو الداخلي باستخدام خاصية الحشو، حيث يمكن إدراج 4 قيم مرة واحدة، مفصولة بمسافة، لجميع الحواف، على التوالي.
أيضًا، كما هو الحال مع الهامش، يمكنك إضافة اسم الجانب وتعيين المسافة له فقط. على سبيل المثال، يمكن كتابة الحشو العلوي باستخدام الحشو العلوي. بشكل عام، تعمل خاصية الحشو تمامًا مثل خاصية الهامش.
على سبيل المثال، يمكنك إعطاء هذا الجزء من التعليمات البرمجية:
حاجز(
العرض: 200 بكسل؛
الحشو: 20 بكسل؛
}
في رأيك، ماذا سيكون العرض الفعلي لعنصرنا؟ هنا يمكنك أن ترى أنها 200 بكسل، لكن الحشوات تضيف 20 بكسل أخرى على كل جانب، ليصبح المجموع 240 بكسل. خذ هذا في الاعتبار عند التصميم.
أود أيضًا أن أشير إلى أن الحشو يتم تحديده عادةً لعناصر الكتلة فقط؛ ومن الأفضل عدم إعطائه للعناصر المضمنة. الهامش يعمل بشكل جيد مع أي عناصر.
لعرض العناصر على صفحة الويب بشكل أكثر جمالا، يتم استخدام الهوامش الخارجية والداخلية في CSS، وسننظر في ذلك الآن باستخدام الأمثلة.
كل عنصر، سواء كان فقرة أو div أو صورة أو مقطع فيديو، عبارة عن كتلة يمكن وضع مسافة بادئة لها في الداخل باستخدام خاصية الحشو وخارجها باستخدام هامش.
في CSS، تتم كتابة خصائص المسافة البادئة بهذه الطريقة (يتم أخذ الفقرة كمثال):
بدلاً من علامة P، ستكتب العنصر الخاص بك بالطبع، والذي سيتم تطبيق المسافة البادئة عليه.
من الضروري أن نفهم ونتذكر أنه بالنسبة لمعلمات الهامش والحشو، فإن بناء المسافات البادئة لكل جانب هو نفسه.
أي أن لدينا 4 قيم في كل مسافة بادئة:
القيم البادئة.
- القيمة الأولى:الحشو العلوي
- المعنى الثاني:المسافة البادئة اليمنى؛
- المعنى الثالث:المسافة البادئة السفلية؛
- المعنى الرابع :المسافة البادئة اليسرى.
في هذا المثال، قمت بإنشاء الهامش الخارجي في CSS بهذه الطريقة: كتبت 20 بكسل في الأعلى، و10 بكسل على اليسار واليمين (كقاعدة عامة، يتم كتابتهما بنفس الطريقة للتناظر)، و30 بكسل في الأسفل.
وبالنسبة للحشوة التي حددتها: 10 بكسل في الأعلى، واليسار واليمين، و14 بكسل في الأسفل.
يمكن تقليل قيمة المسافات البادئة في خصائص الهامش والحشو، بشرط أن تكون بنفس الحجم.
من المثال الخاص بي، سيبدو التدوين المختصر كما يلي:
أي أنه عندما يكون الإدخال الرقمي الأخير مفقودًا، في هذه الحالة بالنسبة للمسافة البادئة اليسرى، يستبدل المتصفح تلقائيًا نفس القيمة للمسافة البادئة اليسرى مثل القيمة الموجودة على اليمين.
وفي حالتي، ستكون الهوامش على اليمين واليسار 10 بكسل في كل من الهامش والحشوة.
وإذا كان لديك نفس القيم للهوامش في الأعلى والأسفل (على سبيل المثال: 16 بكسل)، وأيضًا نفس القيم للهوامش في اليسار واليمين (على سبيل المثال: 20 بكسل)، فسيتم الإدخال لديك شكل أكثر اختصارًا:
وفقا لذلك للحشوة الداخلية دخول المغلقفعلت بشكل مماثل لهذا واحد.
تطبيق المسافات البادئة الفردية: لكل جانب على حدة.
يتم استخدام خصائص القيمة المفردة التالية لتحديد مسافة بادئة فردية:
خصائص المسافة البادئة لكل جانب.
- الهامش العلوي: 3 بكسل؛ الهامش العلوي الخارجي؛
- الهامش الأيسر: 4 بكسل؛ الهامش الخارجي الأيسر؛
- الهامش الأيمن: 6 بكسل؛ الهامش الأيمن الخارجي؛
- الهامش السفلي: 10 بكسل؛ الهامش السفلي الخارجي.
تتم كتابة إدخالات المسافات البادئة الداخلية بنفس الطريقة، فقط تحتاج إلى استبدال الهامش بالحشوة.
على سبيل المثال، بالنسبة لجميع صور img، لديك بالفعل جميع المسافات البادئة مكتوبة بلغة CSS.
أي (للتوضيح) يحتوي الهامش الخارجي على القيم التالية: 10 بكسل في الأعلى، و20 بكسل في اليسار واليمين، و14 بكسل في الأسفل.
والحشوة الداخلية 6 بكسل على الجوانب الأربعة.
لنفترض أنك قررت وضع صورة أخرى على الصفحة، ولكنك تريد تغيير الهامش الخارجي فقط في الأعلى، وترك الباقي كما هو. ولإكمال هذه المهمة، يكفي كتابة فئة لهذه الصورة وإضافة إدخال إضافي إلى CSS.
ونتيجة لذلك، فإن الصورة التي أضفتها مع فئة verx ستقبل جميع الحشوات المحددة في CSS لعلامة img، وستغير فقط الحشو الخارجي للجانب العلوي (في حالتنا: 40 بكسل).
حاولت أن أجعل وصف المسافات البادئة لـ CSS أكثر تفصيلاً، ولكن إذا كان لديك أي أسئلة، فاطرحها من خلال التعليقات.
مرحبًا! في البداية كنت أرغب في تقسيم هذه المقالة إلى 4 مقالات صغيرة، ولكن بعد ذلك فكرت في الأمر. لماذا؟ بعد كل شيء، يكون الأمر أكثر ملاءمة عندما يتم جمع هذه المعلومات ضمن مادة واحدة.
لذا، سنتعلم اليوم كيفية عمل مسافة بادئة في CSS على اليسار وجميع الجوانب الأخرى - اليمين والأعلى والأسفل. يمكن صنعها للصور والنصوص. أنها تأتي في نوعين:
- خارجي؛
- داخلي.
بالنسبة للأول، الخاصية الرئيسية هي الهامش، بالنسبة للأخير - الحشو. من أجل الوضوح، قدمت لك مثالا صغيرا. لتسهيل التمييز بين المساحة الداخلية والخارجية بصريًا، أضفت جدولًا مرئيًا. دعونا نرى ما حدث؟
هوامش
وذلك بتسجيلهم في ملف أنماط CSS، يمكنك ضبط اتجاه قالب المعلومات على الصفحة. على سبيل المثال، سأحركه إلى اليسار وإلى الأسفل. اسمحوا لي أن أوضح على الفور كيف سيبدو.
بشكل عام، يمكنك استخدام الخيارات التالية لتعيين المسافات البادئة.
اليسار (الهامش الأيسر).
على اليمين (الهامش الأيمن).
أعلى (الهامش العلوي).
أسفل (الهامش السفلي).
الآن سأريكم فارقًا بسيطًا رائعًا آخر.
كما ترون، يمكنك استخدام أحد الخيارات - التأثير هو نفسه. فقط في الحالة الثانية، يصبح الكود أكثر إحكاما. لاحظ أيضًا أنه يتم ضبط المسافات البادئة في اتجاه عقارب الساعة. كل شيء يبدأ من الأعلى وينتهي في اليسار.
حشوة
الإجراء مشابه هنا. الآن فقط سأضيف خصائص جديدة ليس للجدول بأكمله، ولكن لمحتويات الأعمدة.
دعونا نرى ما جاء منه.
قياسا على المسافة الفارغةالخامس CSS خارجييمكن كتابتها بشكل مختصر أو للأطراف بشكل منفصل.
وكانت هذه النقاط الرئيسية. وأخيرًا، سأوضح لك كيف يمكنك تسهيل بعض الأعمال.
مسافة بادئة على مستوى العلامة المحدد
في الحالات الموضحة أعلاه، يتم ضبطها للنص والصور في نفس الوقت. في الواقع، يمكنك ضبط المسافة إلى العناصر على مستوى علامة معينة. سأريكم كيف يعمل. انا ألغي التغييرات الأخيرةوحدد رمزًا خاصًا في ملف النمط.
دعونا نلقي نظرة على ما حدث بعد حفظ التغييرات.
ظلت الصورة في مكانها، ولم يتم نقل سوى النص الموجود في ملف . يمكن تطبيق معالجات مماثلة على كتل أخرى، على سبيل المثال، TR، SPAN.
مثل معلومات إضافيةأقترح عليك قراءة المنشور حول المهمة. هناك أيضا وصف كاف طرق مثيرة للاهتمام. يمكن أن يكون مفيدًا لتشكيل خط أحمر في النص أو تنفيذ إجراءات أخرى.
بالإضافة إلى الاشتراك في رسالة إخبارية مجانيةمعلومات عن عناوين البريد الإلكتروني. هناك نموذج خاص للاشتراك في المدونة. أراك لاحقًا.
مع ظهور خصائص إدارة المسافة البادئة لـ CSS، أصبح لدى مطوري الويب فرص هائلة لإدارة الواجهة وتصميم صفحات موقع الويب. في السابق، كانت تتم إدارة المسافات البادئة باستخدام الجداول، التي كانت أكثر تعقيدًا وضخامة.
دعونا نلقي نظرة على الخصائص الأساسية لإدارة الغياب.
إدارة الهوامش في HTML باستخدام CSS باستخدام خاصية الهامش
خاصية المغلق هامِشيسمح لك بالتحكم بالضبط هوامش خارجية. لنفترض أن هناك صورة تحتاج إلى تحديد هوامش خارجية لها: 30 بكسل في الأعلى، و20 بكسل على اليسار، و10 بكسل على اليمين، و5 بكسل في الأسفل.
لتعيين الهامش في الأعلى سنكتب:Margin-top:30px
لتعيين الهامش الأيسر: هامش اليسار: 30px
الهامش الأيمن: الهامش الأيمن: 10 بكسل
والأسفل: الهامش السفلي: 5 بكسل
يمكنك دمج كل شيء عن طريق كتابة ما يلي: هامش: 30px 10px 5px 20px؛
على سبيل المثال، لنقم بتعيين هذه المسافات البادئة للصورة. نحصل على كود html التالي:
يمكنك أن ترى كيف تحولت الصورة بالنسبة للعنصر الأصلي.
إذا قمت بتحديد الهامش: 30px، ثم الحشو المغلقسيكون هو نفسه من جميع الجوانب الأربعة وسيكون مساوياً لـ 30 بكسل.
يأكل خياراتتعليمات قيمتان وثلاثفي المواصفات: الهامش:10 بكسل 20 بكسل؛. ستتأكد هذه المعلمة من أن الهوامش الخارجية في CSS تظهر في الأعلى والأسفل 10 بكسل، واليسار واليمين 20 بكسل؛
في كثير من الأحيان، ليس من الممكن دائمًا لمصممي التخطيط المبتدئين أن يتذكروا على الفور جميع المجموعات الممكنة، لذلك المراحل الأوليةيمكنك استخدام المعلمات التالية: هامش أعلى، هامش يمين، هامش يسار، هامش أسفل. أعلى - أعلى، يمين - يمين، يسار - يسار، أسفل - أسفل.
