الهامش مقابل الحشو
يعد الاختلاف بين الهامش والحشو جانبًا مهمًا في CSS لأن الهامش والحشو مفهومان مهمان يستخدمان في CSS لتوفير التباعد بين العناصر المختلفة. الحشو والهوامش غير قابلة للتبديل ولها أغراض مختلفة لذا يجب استخدامها بشكل مناسب. المساحة المتروكة هي المسافة بين المحتوى وحدود الكتلة. الهامش ، من ناحية أخرى ، هو المساحة الموجودة خارج حدود الكتلة. يفصل الهامش الكتل عن الكتل المجاورة بينما يفصل الحشو الحدود عن المحتوى.
ما هو الحشو؟
في CSS (أوراق الأنماط المتتالية) ، الحشو هو المساحة المحفوظة بين المحتوى والحدود.يفصل محتوى الكتلة عن حافتها. الحشو شفاف ويتضمن صورة الخلفية أو لون خلفية العنصر أيضًا. يتم تحديد مقدار المساحة المتروكة لعنصر باستخدام المصطلح "padding" في كود CSS. على سبيل المثال ، لإضافة مساحة 25 بكسل حول المحتوى يمكن استخدام الكود التالي.
div {
العرض: 300 بكسل ؛
الارتفاع: 300 بكسل ؛
المساحة المتروكة: 25 بكسل ؛
الحدود: 25 بكسل صلبة ؛
}
إذا لزم الأمر ، يمكن تحديد قيم حشو مختلفة بشكل منفصل لليسار واليمين والأعلى والأسفل أيضًا. يحدد الجزء التالي من التعليمات البرمجية قيم حشو مختلفة لكل جانب.
div {
العرض: 300 بكسل ؛
الارتفاع: 300 بكسل ؛
المساحة العلوية: 25 بكسل ؛
الحشو السفلي: 35 بكسل ؛
مساحة اليسار: 5 بكسل ؛
المساحة اليمنى: 10 بكسل ؛
الحدود: 25 بكسل صلبة ؛
}
ما هو الهامش؟
في CSS (أوراق الأنماط المتتالية) ، الهامش هو المساحة الموجودة خارج الحدود. يفصل كتلة من كتل أخرى. الهامش شفاف أيضًا ، ولكن الاختلاف الكبير مع المساحة المتروكة هو أن الهامش لا يتضمن صور الخلفية أو ألوان الخلفية المطبقة على العنصر. يتم تحديد مقدار الهامش في CSS باستخدام مصطلح "الهامش". طبق الجزء التالي من الكود هامشًا بمقدار 25 بكسل حول كتلة div.
div {
العرض: 320 بكسل ؛
الارتفاع: 320 بكسل ؛
الحدود: 5 بكسل صلبة ؛
الهامش: 25 بكسل ؛
}
يمكن تحديد قيم مختلفة لجوانب مختلفة من الكتلة أيضًا. الجزء التالي من الكود يطبق قيم هامش مختلفة لكل جانب.
div {
العرض: 320 بكسل ؛
الارتفاع: 320 بكسل ؛
الحدود: 5 بكسل صلبة ؛
margin-top: 25px ؛
الهامش السفلي: 35 بكسل ؛
margin-left: 5px ؛
margin-right: 10px ؛
}
ما الفرق بين الهامش والحشو؟
• المساحة المتروكة هي المسافة بين الحد والمحتوى بينما الهامش هو المسافة خارج الحدود.
• الحشو يفصل محتوى الكتلة عن الحد. يفصل الهامش كتلة واحدة عن الأخرى.
• الحشو يتكون من صور الخلفية وألوان الخلفية المطبقة على المحتوى بينما الهامش لا يحتوي على مثل هذا.
• يمكن أن تتداخل هوامش الكتل المجاورة بينما لا تتداخل الحشوة.
ملخص:
الحشو مقابل الهامش
الحشو هو المساحة الموجودة داخل حدود الكتلة التي تفصل الحد عن المحتوى. الهامش هو التباعد خارج الحد الذي يفصل كتلة عن الكتل المجاورة. الفرق الآخر هو أن الحشو يتضمن صورة الخلفية وألوان الخلفية المطبقة حول المحتوى بينما الهامش لا يحتوي عليها. قد تتداخل هوامش الكتل المجاورة أحيانًا عند عرض المتصفح للصفحة ولكن لن يحدث مثل هذا الأمر في حالة الحشو.
