متى تستخدم الهامش مقابل الحشو في CSS

'حاوية بها فئة' الهامش div 'وتطبيق' نمط 'باسم' الحد: 1 بكسل أسود خالص '. بعد ذلك ، أضف بعض النص في '

' بطاقة شعار:

< شعبة صف دراسي = 'margin-div' نمط = 'الحد: 1 بكسل أسود خالص' >
< ص > Linuxhint هو أحد أفضل مواقع الويب التعليمية ر >
< / ص >
< شعبة >

انتاج |

الآن ، قم بتطبيق خاصية 'margin' على فئة '.margin-div':

.margin-div {
معرفتي- اللون : rgb ( 199 و 238 و 205 ) ؛
الخط- بحجم : متوسط؛
الحدود : 3 بكسل RGB ( 114 و 250 و 114 ) ؛
الهامش: 100 بكسل 100 بكسل 100 بكسل 100 بكسل ؛
}

في الكود أعلاه ، ' .margin-div 'للوصول إلى عنصر div لتطبيق الخصائص المدرجة أدناه:

• ' لون الخلفية 'لتطبيق اللون في الخلفية.
• ' حجم الخط 'لضبط حجم الخط.
• ' حافة 'يخصص المساحة خارج العنصر. على سبيل المثال ، قمنا بتعيين خاصية 'margin' على أنها ' 100 بكسل '.

هنا ، يمكنك أن ترى أننا نجحنا في تعيين ' حافة 'الخاصية في الثانية' شعبة ' جزء:

كيفية استخدام 'padding' في CSS؟

من أجل استخدام خاصية 'padding' ، تم استخدام الأمثلة المذكورة أعلاه. في الثانية ' شعبة 'الحاوية ، استخدم الفئة' padding-div 'لتطبيق المساحة المتروكة:

< شعبة صف دراسي = 'لينكس' >
< ص > Linuxhint هو أحد أفضل مواقع الويب التعليمية < / ص >
< / شعبة >
< شعبة صف دراسي = 'padding-div' نمط = 'الحد: 1 بكسل أسود خالص' >
< ص > Linuxhint هو أحد أفضل مواقع الويب التعليمية ر >
< / ص >
< / شعبة >

انتاج |

لتطبيق المساحة المتروكة وخصائص CSS الأخرى على ' .padding-div '، ألق نظرة على الكود المقدم:

.padding-div {
معرفتي- اللون : rgb ( 199 و 238 و 205 ) ؛
الخط- بحجم : متوسط؛
الحشو: 50 بكسل 50 بكسل 50 بكسل 50 بكسل ؛
}

في الكود المذكور أعلاه ، وصلنا إلى الثانية ' شعبة 'عنصر باستخدام الفئة' .padding-div '. لقد قمنا بتعيين 'لون الخلفية' و 'حجم الخط'. وعلاوة على ذلك، فإن ' حشوة 'لإضافة مساحة حول محتوى العنصر من كل جانب كـ' 50 بكسل '.

انتاج |

لقد أوضحنا الاختلافات والاستخدامات بين 'padding' و 'margin' في CSS.

استنتاج

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