في CSS ، يمكن أن تحقق الحشو والهوامش أشياء مماثلة. لماذا إذن ، قد يكون أحدهما أفضل من الآخر؟


الاجابه 1:

بما أنك تفهم الأساسيات ، فلدي مثال واحد:

  • لون الخلفية
  • الصورة الخلفية

لنفترض أن لديك div بنسب 200 × 200 بكسل بلون خلفية سوداء.

اختلافات:

الهامش: 10 بكسل ؛

سيكون لدى div الخاص بك نسب 200 × 200 بكسل مع لون خلفية أسود وسيكون بهامش 10 بكسل من جميع الجوانب (10 بكسل من المساحة الحرة).

الحشو: 10 بكسل ؛

سيحتوي قسمك على نسب 200 × 200 بكسل بالإضافة إلى 10 بكسل من المساحة المتروكة مع لون الخلفية باللون الأسود ، لذا ستبدو في الواقع بحجم 220 × 220 بكسل.

لذا أعتقد أنك تستخدم:

  • الهامش إذا كنت ترغب في وضع بعض div. أستخدم الهامش لإنشاء تخطيط لموقع الويب.
  • المساحة المتروكة إذا كنت تريد مساحة حول div / الزر / الجدول / الصورة لعرض أفضل (ux).

لقد كتبت هذا المثال على Jsfiddle لك:

  • تحرير كمان - JSFiddle

اتمني ان يكون مفيدا.

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