كيف تتذكر في CSS أن الهامش يقع خارج الحدود والحشوة بالداخل
https://stackoverflow.com/questions/32668
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
لا أقوم بتحرير CSS كثيرًا، وفي كل مرة تقريبًا أحتاج إلى البحث في Google عن ملف نموذج مربع CSS للتحقق مما إذا كان padding هو داخل border و margin في الخارج، أو العكس.(فقط التحقق مرة أخرى و padding هو في الداخل).
هل لدى أي شخص طريقة جيدة لتذكر هذا؟القليل من التذكير، تفسير جيد لسبب كون الأسماء بهذه الطريقة ...
المحلول
عند العمل مع CSS، فإنك أخيرًا تدفعك إلى جنون الخلية المبطنة التي سيضعونك فيها والتي تحتوي على الحشوة داخل من الجدران.
نصائح أخرى
دبوس - P موجود
أنت تستخدم صندوقًا.إذا كنت تضع شيئًا ما في صندوق، فسوف تضع بعض الحشو بداخله للتأكد من عدم اصطدامه بالجوانب.عندها سيكون الهامش هو الشيء الآخر.
طباعة الرسم البياني من أبعاد الصندوق قسم المواصفات، ووضعه على الحائط.
بالنسبة لي، "الحشو" يبدو أكثر عمقًا من "الهامش".ربما التفكير في الصفحة المطبوعة من شأنه أن يساعد؟الهوامش هي مناطق في أقصى الخارج - بشكل عام، لا يمكنك حتى الطباعة حتى الحافة - فهي غير مميزة.ضمن هذه الهوامش، هل يمكن تعبئة المحتوى لتوفير حاجز إضافي بين المحتوى والهامش؟
بمجرد أن تعمل بما فيه الكفاية في CSS، سيصبح تذكر ذلك أمرًا طبيعيًا.
عادة ما يتم استخدام الحشو في الداخل.سواء على الجزء الداخلي من الحائط أو على صندوق التسليم، فهذا أمر بسيط.وإذا كانت الحشوة بالداخل، فالهامش بالخارج.لا ينبغي أن يكون من الصعب جدا.
لقد تعلمت ذلك مع مرور الوقت - نموذج الصندوق بسيط إلى حد ما ولكن السبب الرئيسي الذي يجعل الناس يجدونه صعبًا هو أنه body لا يكسر النموذج بشكل واضح.
حقا، إذا أعطيت body هامش وخلفية يجب أن تراها محاطة بشريط أبيض.ولكن هذا ليس هو الحال - bodyالحشو هو نفس الهامش.يؤدي هذا إلى إنشاء بعض الأشياء غير الصحيحة حول نموذج الصندوق.
عادةً ما أفكر في الأمر على النحو التالي:
- الهامش = المسافة حول الصندوق؛
- الحدود = حافة الصندوق؛
- الحشو = المساحة داخل الصندوق.
قدم تيم سوندرز بعض النصائح الممتازة - عندما بدأت في استخدام CSS لأول مرة، حرصت على بناء ورقة أنماط أساسية جيدة ومعلقة بالكامل.لقد تغيرت ورقة الأنماط هذه عدة مرات وتظل مصدرًا رائعًا.
ومع ذلك، عندما واجهت مشكلات في نموذج الصندوق الخاص بي، بدأت في استخدام "Mo Pi".كما هو الحال في ، "أنا لست سمينًا بما فيه الكفاية ، أحتاج إلى أكل مو." غريب ، لكنه عمل بالنسبة لي.بالطبع، زاد وزني بمقدار عشرين رطلاً أثناء تعلم CSS...;-)
استخدم Firebug لمساعدتك على الرؤية.
أنشئ لنفسك ورقة أنماط أساسية معلّقة يمكنك استخدامها كقالب عندما تحتاج إلى إنشاء موقع جديد أو تحرير موقع موجود.
يمكنك الإضافة إليها مع نمو معرفتك وتطبيقها على العديد من المتصفحات المختلفة لترى كيف تتصرف الأشياء المختلفة.
ستتمكن أيضًا من إضافة تعليقات أو أمثلة حول أشياء أخرى يصعب تذكرها أو أشياء غير بديهية.
أضف حدودًا، ولو بشكل مؤقت.عندما تلعب بالأرقام، سترى الفرق.
في الواقع، تعد الحدود المؤقتة حول العناصر طريقة مفيدة للعمل، بحيث يمكنك معرفة سبب انخفاض العوامات، وما إلى ذلك.
أعلم أن هذا إجابة لسؤالك، لكنه مجرد نصيحة.عندما أتعامل مع الهامش والحشو، سأضيف حدًا حول الجزء الذي تعمل به، ثم من هناك يظهر لي الغرفة التي يجب أن أعمل بها.عندما أكون جاهزًا، أقوم بإزالة الحدود.
PAdding هو جزء من طلاء العنصر:فهو يمتد العنصر خلفية.من المنطقي التفكير في عنصر مزدوج + حشوة كمشاركة خلفية مشتركة.الحشو يشبه قماش اللوحة:كلما كانت الحشوة أكبر، كانت اللوحة القماشية أكبر وبالتالي الخلفية.الحدود (إطار اللوحة) سوف تدور حول هذا الزوج.و هامِش سيتم فصل اللوحات على جدار المعرض.يساعد التفكير في مفهوم خلفية الكائن في لصق الكائن المزدوج + الحشو معًا.التفسيرات المعتادة لما هو في الداخل وما هو خارجه لا تلتصق بالذاكرة:بعد فترة يعود الجميع إلى الارتباك الأصلي.تذكر أيضًا أن الهوامش قابلة للطي رأسيًا بينما الحشو ليس كذلك.
بدلا من السؤال مرارا وتكرارا على جوجل، يمكنك فقط استخدام نافذة المفتش.في علامة تبويب النمط هذه وانتقل لأسفل إلى الأسفل، يمكنك رؤية مثل هذا.
الهامش: عندما تريد تحريك الكتلة.حشوة:عندما تريد نقل العناصر داخل كتلة.
