CSS Margin and Padding: Difference between revisions

Revision as of 23:54, 22 April 2025

هامش وحشو CSS: دليل شامل للمبتدئين

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

ما هو الهامش (Margin)؟

الهامش هو المساحة الفارغة المحيطة بعنصر HTML. إنه المسافة بين العنصر والعناصر المجاورة له. يمكن اعتبار الهامش بمثابة "حدود" غير مرئية تحدد المسافة بين العنصر ومحيطه. يستخدم الهامش للتحكم في المسافة بين العناصر المختلفة على الصفحة، مما يمنح التصميم مساحة للتنفس ويجعله أكثر وضوحًا.

وظيفة الهامش: تحديد المسافة الخارجية للعنصر.
القيم: يمكن تحديد الهامش باستخدام قيم مختلفة:

   * أرقام (px, em, rem, %): تحدد المسافة بالبكسل أو غيرها من الوحدات.
   * auto: يوزع المساحة المتاحة بالتساوي على الهوامش. (مفيد في توسيط العناصر.)
   * inherit: يرث قيمة الهامش من العنصر الأصل.

أمثلة على قيم الهامش
الكود	النتيجة	`margin: 10px;`	يضيف هامشًا بقيمة 10 بكسل حول جميع جوانب العنصر.	`margin-top: 20px;`	يضيف هامشًا بقيمة 20 بكسل في الجزء العلوي من العنصر.	`margin-left: 15px; margin-right: 5px;`	يضيف هامشًا بقيمة 15 بكسل على اليسار و 5 بكسل على اليمين.	`margin: 10px 20px;`	يضيف هامشًا بقيمة 10 بكسل أعلى وأسفل، و 20 بكسل على اليمين واليسار.	`margin: 10px 20px 30px 40px;`	يضيف هامشًا بقيمة 10 بكسل أعلى، 20 بكسل يمين، 30 بكسل أسفل، و 40 بكسل يسار.

ما هو الحشو (Padding)؟

الحشو هو المساحة الفارغة داخل العنصر، بين محتوى العنصر وحدوده. يمكن اعتباره "بطانة" داخلية للعنصر. يستخدم الحشو لزيادة المسافة بين محتوى العنصر والحدود، مما يجعله أكثر قابلية للقراءة وأكثر جاذبية من الناحية البصرية.

وظيفة الحشو: تحديد المسافة الداخلية للعنصر.
القيم: كما هو الحال مع الهامش، يمكن تحديد الحشو باستخدام قيم مختلفة:

   * أرقام (px, em, rem, %): تحدد المسافة بالبكسل أو غيرها من الوحدات.
   * inherit: يرث قيمة الحشو من العنصر الأصل.

أمثلة على قيم الحشو
الكود	النتيجة	`padding: 10px;`	يضيف حشوًا بقيمة 10 بكسل حول جميع جوانب محتوى العنصر.	`padding-top: 20px;`	يضيف حشوًا بقيمة 20 بكسل في الجزء العلوي من محتوى العنصر.	`padding-left: 15px; padding-right: 5px;`	يضيف حشوًا بقيمة 15 بكسل على اليسار و 5 بكسل على اليمين.	`padding: 10px 20px;`	يضيف حشوًا بقيمة 10 بكسل أعلى وأسفل، و 20 بكسل على اليمين واليسار.	`padding: 10px 20px 30px 40px;`	يضيف حشوًا بقيمة 10 بكسل أعلى، 20 بكسل يمين، 30 بكسل أسفل، و 40 بكسل يسار.

الفرق بين الهامش والحشو

| الميزة | الهامش (Margin) | الحشو (Padding) | |---|---|---| | **الموقع** | خارج العنصر | داخل العنصر | | **الوظيفة** | المسافة بين العنصر والعناصر المجاورة | المسافة بين محتوى العنصر وحدوده | | **التأثير على الحجم** | لا يؤثر على حجم العنصر نفسه | يؤثر على الحجم الكلي للعنصر (يزيد من عرضه وارتفاعه) | | **لون الخلفية** | شفاف (يظهر لون الخلفية للعنصر الأصل) | لون الخلفية للعنصر نفسه |

استخدامات الهامش والحشو

**تحسين قابلية القراءة:** استخدام الحشو حول النص يجعل النص أكثر سهولة في القراءة.
**إنشاء تباعد بين العناصر:** استخدام الهامش بين العناصر المختلفة يخلق تباعدًا بصريًا ويحسن تنظيم الصفحة.
**تصميم الأزرار:** استخدام الحشو داخل الأزرار يجعلها أكبر وأكثر وضوحًا.
**تخطيط الصفحة:** الهامش والحشو ضروريان لتنفيذ تخطيطات معقدة باستخدام CSS Box Model.

ملاحظات هامة

Collapsing Margins (تداخل الهوامش): في بعض الحالات، يمكن أن تتداخل الهوامش الرأسية أو الأفقية بين العناصر المجاورة، مما يؤدي إلى تجميعها.
Box Sizing (حجم الصندوق): خاصية `box-sizing` في CSS تتحكم في كيفية حساب عرض وارتفاع العنصر. استخدام `box-sizing: border-box;` يجعل الحشو والهامش جزءًا من الحجم الكلي للعنصر، مما يسهل التحكم في التخطيط. CSS Box Model
التعامل مع الهوامش السالبة: يمكن استخدام الهوامش السالبة لتحريك العناصر بشكل دقيق، ولكن يجب استخدامها بحذر.

استراتيجيات متقدمة

**استخدام الهامش للحصول على تخطيطات متعددة الأعمدة:** يمكن استخدام الهامش الأيسر والأيمن لإنشاء تخطيطات بسيطة متعددة الأعمدة. CSS Grid Layout
**استخدام الحشو لإنشاء تأثيرات بصرية:** يمكن استخدام الحشو مع حدود مختلفة الألوان لإنشاء تأثيرات بصرية جذابة. CSS Borders
**التحكم في الهوامش والحشو باستخدام JavaScript:** يمكن تغيير قيم الهامش والحشو ديناميكيًا باستخدام JavaScript لتوفير تجربة مستخدم تفاعلية. JavaScript

روابط ذات صلة

ابدأ التداول الآن

سجل في IQ Option (الحد الأدنى للإيداع $10) افتح حساباً في Pocket Option (الحد الأدنى للإيداع $5)

انضم إلى مجتمعنا

اشترك في قناة Telegram الخاصة بنا @strategybin للحصول على: ✓ إشارات تداول يومية ✓ تحليلات استراتيجية حصرية ✓ تنبيهات باتجاهات السوق ✓ مواد تعليمية للمبتدئين

@@ Line 1: / Line 1: @@
-=== هامش وحشو CSS للمبتدئين ===
+== هامش وحشو CSS: دليل شامل للمبتدئين ==
-'''مقدمة'''
+'''هامش''' و '''حشو''' CSS هما مفهومان أساسيان في '''تصميم الويب'''، يلعبان دورًا حاسمًا في التحكم في '''تخطيط الصفحة''' ومظهر العناصر. فهمهما ضروري لإنشاء مواقع ويب جذابة وسهلة الاستخدام. غالبًا ما يخلط المبتدئون بينهما، ولكن لكل منهما وظيفة مختلفة. يهدف هذا المقال إلى شرح هذين المفهومين بتفصيل، مع أمثلة عملية، ومقارنة بينهما، وكيفية استخدامهما بفعالية.
-في عالم تصميم الويب، يعد التحكم في المساحة حول عناصر [[HTML]] أمرًا بالغ الأهمية لإنشاء تصميمات جذابة وسهلة الاستخدام. هنا يأتي دور '''هامش''' و'''حشو''' CSS. غالبًا ما يتم الخلط بينهما، لكنهما يخدمان أغراضًا مختلفة تمامًا. يهدف هذا المقال إلى شرحهما بالتفصيل للمبتدئين، مع التركيز على كيفية استخدامهما لتحسين تصميم الويب الخاص بك.
-'''ما هو الهامش (Margin)؟'''
+== ما هو الهامش (Margin)؟ ==
-الهامش هو المساحة المحيطة بعنصر HTML، *خارج* حدوده.  يعمل الهامش على تحديد المسافة بين العنصر والعناصر المجاورة له.  فكر فيه كحاجز غير مرئي يحيط بالعنصر.  يمكن تعيين الهامش لأعلى (margin-top)، وأسفل (margin-bottom)، واليمين (margin-right)، واليسار (margin-left).  يمكنك أيضًا استخدام خاصية '''margin''' المختصرة لتعيين جميع الهوامش الأربعة في سطر واحد.
+الهامش هو المساحة الفارغة المحيطة بعنصر HTML. إنه المسافة بين العنصر والعناصر المجاورة له. يمكن اعتبار الهامش بمثابة "حدود" غير مرئية تحدد المسافة بين العنصر ومحيطه. يستخدم الهامش للتحكم في المسافة بين العناصر المختلفة على الصفحة، مما يمنح التصميم مساحة للتنفس ويجعله أكثر وضوحًا.
-''مثال'':
+* '''وظيفة الهامش:''' تحديد المسافة الخارجية للعنصر.
+* '''القيم:''' يمكن تحديد الهامش باستخدام قيم مختلفة:
+    * '''أرقام (px, em, rem, %):''' تحدد المسافة بالبكسل أو غيرها من الوحدات.
+    * '''auto:''' يوزع المساحة المتاحة بالتساوي على الهوامش. (مفيد في [[توسيط العناصر]].)
+    * '''inherit:''' يرث قيمة الهامش من العنصر الأصل.
-```css
+{| class="wikitable"
-div {
+|+ أمثلة على قيم الهامش
-  width: 200px;
+|-
-  height: 100px;
+| الكود || النتيجة
-  background-color: lightblue;
+| `margin: 10px;` || يضيف هامشًا بقيمة 10 بكسل حول جميع جوانب العنصر.
-  margin: 20px; /* يضيف هامشًا بقيمة 20 بكسل حول العنصر */
+| `margin-top: 20px;` || يضيف هامشًا بقيمة 20 بكسل في الجزء العلوي من العنصر.
-}
+| `margin-left: 15px; margin-right: 5px;` || يضيف هامشًا بقيمة 15 بكسل على اليسار و 5 بكسل على اليمين.
-```
+| `margin: 10px 20px;` || يضيف هامشًا بقيمة 10 بكسل أعلى وأسفل، و 20 بكسل على اليمين واليسار.
+| `margin: 10px 20px 30px 40px;` || يضيف هامشًا بقيمة 10 بكسل أعلى، 20 بكسل يمين، 30 بكسل أسفل، و 40 بكسل يسار.
+|}
-في هذا المثال، سيكون هناك مسافة 20 بكسل بين العنصر div والعناصر الأخرى في الصفحة.
+== ما هو الحشو (Padding)؟ ==
-'''ما هو الحشو (Padding)؟'''
+الحشو هو المساحة الفارغة داخل العنصر، بين محتوى العنصر وحدوده. يمكن اعتباره "بطانة" داخلية للعنصر. يستخدم الحشو لزيادة المسافة بين محتوى العنصر والحدود، مما يجعله أكثر قابلية للقراءة وأكثر جاذبية من الناحية البصرية.
-الحشو هو المساحة *داخل* حدود العنصر HTML.  يحدد المسافة بين محتوى العنصر وحدوده.  فكر فيه كبطانة داخلية للعنصر.  يمكن تعيين الحشو لأعلى (padding-top)، وأسفل (padding-bottom)، واليمين (padding-right)، واليسار (padding-left).  وبالمثل، يمكنك استخدام خاصية '''padding''' المختصرة لتعيين جميع الحشوات الأربعة في سطر واحد.
+* '''وظيفة الحشو:''' تحديد المسافة الداخلية للعنصر.
+* '''القيم:'''  كما هو الحال مع الهامش، يمكن تحديد الحشو باستخدام قيم مختلفة:
+    * '''أرقام (px, em, rem, %):''' تحدد المسافة بالبكسل أو غيرها من الوحدات.
+    * '''inherit:''' يرث قيمة الحشو من العنصر الأصل.
-''مثال'':
+{| class="wikitable"
+|+ أمثلة على قيم الحشو
+|-
+| الكود || النتيجة
+| `padding: 10px;` || يضيف حشوًا بقيمة 10 بكسل حول جميع جوانب محتوى العنصر.
+| `padding-top: 20px;` || يضيف حشوًا بقيمة 20 بكسل في الجزء العلوي من محتوى العنصر.
+| `padding-left: 15px; padding-right: 5px;` || يضيف حشوًا بقيمة 15 بكسل على اليسار و 5 بكسل على اليمين.
+| `padding: 10px 20px;` || يضيف حشوًا بقيمة 10 بكسل أعلى وأسفل، و 20 بكسل على اليمين واليسار.
+| `padding: 10px 20px 30px 40px;` || يضيف حشوًا بقيمة 10 بكسل أعلى، 20 بكسل يمين، 30 بكسل أسفل، و 40 بكسل يسار.
+|}
-```css
+== الفرق بين الهامش والحشو ==
-div {
-  width: 200px;
-  height: 100px;
-  background-color: lightblue;
-  padding: 20px; /* يضيف حشوًا بقيمة 20 بكسل داخل العنصر */
-}
-```
-في هذا المثال، سيكون هناك مسافة 20 بكسل بين محتوى العنصر div وحدوده.
+| الميزة | الهامش (Margin) | الحشو (Padding) |
+|---|---|---|
+| **الموقع** | خارج العنصر | داخل العنصر |
+| **الوظيفة** | المسافة بين العنصر والعناصر المجاورة | المسافة بين محتوى العنصر وحدوده |
+| **التأثير على الحجم** | لا يؤثر على حجم العنصر نفسه | يؤثر على الحجم الكلي للعنصر (يزيد من عرضه وارتفاعه) |
+| **لون الخلفية** | شفاف (يظهر لون الخلفية للعنصر الأصل) | لون الخلفية للعنصر نفسه |
-'''الفرق الرئيسي بين الهامش والحشو'''
+== استخدامات الهامش والحشو ==
-| الخاصية   | الوصف                                  | الموقع       |
+* **تحسين قابلية القراءة:** استخدام الحشو حول النص يجعل النص أكثر سهولة في القراءة.
-|-----------|---------------------------------------|-------------|
+* **إنشاء تباعد بين العناصر:** استخدام الهامش بين العناصر المختلفة يخلق تباعدًا بصريًا ويحسن تنظيم الصفحة.
-| الهامش     | المساحة حول العنصر، خارج حدوده        | خارجي       |
+* **تصميم الأزرار:** استخدام الحشو داخل الأزرار يجعلها أكبر وأكثر وضوحًا.
-| الحشو      | المساحة داخل العنصر، بين المحتوى والحدود | داخلي       |
+* **تخطيط الصفحة:** الهامش والحشو ضروريان لتنفيذ تخطيطات معقدة باستخدام [[CSS Box Model]].
-'''قيم الهامش والحشو'''
+==  ملاحظات هامة ==
-يمكن تحديد الهامش والحشو بوحدات مختلفة، مثل:
+*  '''Collapsing Margins (تداخل الهوامش):''' في بعض الحالات، يمكن أن تتداخل الهوامش الرأسية أو الأفقية بين العناصر المجاورة، مما يؤدي إلى تجميعها.
+*  '''Box Sizing (حجم الصندوق):'''  خاصية `box-sizing` في CSS تتحكم في كيفية حساب عرض وارتفاع العنصر.  استخدام `box-sizing: border-box;` يجعل الحشو والهامش جزءًا من الحجم الكلي للعنصر، مما يسهل التحكم في التخطيط. [[CSS Box Model]]
+*  '''التعامل مع الهوامش السالبة:''' يمكن استخدام الهوامش السالبة لتحريك العناصر بشكل دقيق، ولكن يجب استخدامها بحذر.
-*   '''px''' (بكسل): وحدة مطلقة.
+== استراتيجيات متقدمة ==
-*   '''em''' (إيم): وحدة نسبية تعتمد على حجم الخط للعنصر الأب.
-*   '''rem''' (رعم): وحدة نسبية تعتمد على حجم الخط للعنصر الجذر (html).
-*   '''%''' (نسبة مئوية): وحدة نسبية تعتمد على عرض أو ارتفاع العنصر الأب.
-*   '''auto''' (تلقائي): يترك المتصفح يحدد الهامش. غالباً ما يستخدم لـ '''التوسيط الأفقي''' للعناصر.
-'''استخدامات الهامش والحشو'''
+* **استخدام الهامش للحصول على تخطيطات متعددة الأعمدة:**  يمكن استخدام الهامش الأيسر والأيمن لإنشاء تخطيطات بسيطة متعددة الأعمدة. [[CSS Grid Layout]]
+* **استخدام الحشو لإنشاء تأثيرات بصرية:**  يمكن استخدام الحشو مع حدود مختلفة الألوان لإنشاء تأثيرات بصرية جذابة. [[CSS Borders]]
+* **التحكم في الهوامش والحشو باستخدام JavaScript:** يمكن تغيير قيم الهامش والحشو ديناميكيًا باستخدام JavaScript لتوفير تجربة مستخدم تفاعلية. [[JavaScript]]
-*   **التحكم في التخطيط:** الهامش والحشو يساعدان في التحكم في كيفية ترتيب العناصر على الصفحة.
+== روابط ذات صلة ==
-*   **تحسين سهولة القراءة:** الحشو حول النص يجعل قراءته أسهل.
-*   **إنشاء تصميمات جذابة:** الهامش والحشو يساعدان في إنشاء تصميمات متوازنة وجذابة بصريًا.
-*   **التأثير على '''نموذج الصندوق''' (Box Model):** الهامش والحشو جزء أساسي من نموذج الصندوق، والذي يحدد كيفية حساب الحجم الكلي للعنصر.
-'''هامش تلقائي (Auto Margin)'''
+* [[CSS]]
+* [[CSS Selectors]]
-خاصية الهامش التلقائي (margin: auto) مفيدة جدًا في '''التوسيط الأفقي''' للعناصر ذات العرض المحدد.  على سبيل المثال:
+* [[CSS Box Model]]
+* [[CSS Grid Layout]]
-```css
+* [[CSS Flexbox]]
-div {
+* [[CSS Positioning]]
-  width: 50%;
+* [[HTML]]
-  margin: 0 auto; /* يوسّط العنصر أفقيًا */
+* [[HTML Elements]]
-}
+* [[Web Design]]
-```
+* [[Responsive Web Design]]
+* [[CSS Frameworks]] (Bootstrap, Tailwind CSS)
-'''الهوامش السلبية (Negative Margins)'''
+* [[التحليل الفني]]
+* [[تحليل حجم التداول]]
-يمكن استخدام الهوامش السلبية لتحريك العناصر خارج مساحتها الطبيعية.  يجب استخدامها بحذر لأنها قد تؤدي إلى تداخل العناصر.
+* [[استراتيجيات إدارة المخاطر]]
+* [[استراتيجية المتوسط المتحرك]]
-'''الحشو والحدود (Borders)'''
+* [[استراتيجية اختراق النطاق]]
+* [[استراتيجية MACD]]
-الحشو يقع بين المحتوى والحدود، بينما الحدود هي الخطوط التي تحيط بالعنصر.  يمكنك التحكم في مظهر الحدود باستخدام خصائص CSS مثل '''border-width''', '''border-style''', و'''border-color'''.
+* [[استراتيجية RSI]]
+* [[استراتيجية بولينجر باند]]
-'''الموارد الإضافية'''
+* [[استراتيجية فيبوناتشي]]
+* [[الشموع اليابانية]]
-*   [[نموذج الصندوق (CSS)]]: فهم كيفية عمل نموذج الصندوق ضروري لاستخدام الهامش والحشو بفعالية.
+* [[أنماط الشموع اليابانية]]
-*   [[خاصية العرض (CSS)]]: التحكم في عرض العناصر يؤثر على كيفية عمل الهامش والحشو.
+* [[مؤشرات التداول]]
-*   [[خاصية الارتفاع (CSS)]]: التحكم في ارتفاع العناصر يؤثر على كيفية عمل الهامش والحشو.
+* [[تداول الخيارات الثنائية للمبتدئين]]
-*   [[التخطيط باستخدام CSS]] : تعلم كيفية استخدام الهامش والحشو في تخطيطات الويب المختلفة.
+* [[مخاطر تداول الخيارات الثنائية]]
-*   [[التوسيط الأفقي والرأسي (CSS)]]: تقنيات مختلفة للتوسيط باستخدام الهامش والحشو.
-'''استراتيجيات تداول وتحليل فني ذي صلة (للمقارنة وفهم الأثر البصري)'''
-*   [[تحليل الشموع اليابانية]]: فهم الأنماط البصرية.
-*   [[مؤشر المتوسط المتحرك]]: تحديد الاتجاهات.
-*   [[مؤشر القوة النسبية (RSI)]]: تحديد مناطق ذروة الشراء والبيع.
-*   [[مؤشر MACD]]: تحديد نقاط الدخول والخروج المحتملة.
-*   [[خطوط فيبوناتشي]]: تحديد مستويات الدعم والمقاومة.
-*   [[تحليل حجم التداول]]: فهم قوة الاتجاهات.
-*   [[استراتيجية الاختراق]]: استغلال نقاط الاختراق.
-*   [[استراتيجية الارتداد]]: استغلال الارتدادات.
-*   [[استراتيجية التداول المتأرجح]]: استغلال التقلبات.
-*   [[استراتيجية سكالبينج]]: التداول السريع لتحقيق أرباح صغيرة.
-*   [[تحليل الموجات إليوت]]: تحديد الأنماط المتكررة في الأسعار.
-*   [[تحليل أنماط الرسوم البيانية]]: التعرف على الأنماط التي تشير إلى تحركات الأسعار المستقبلية.
-*   [[استراتيجية مارتينجال]]: استراتيجية خطيرة تتضمن مضاعفة الرهانات بعد الخسارة. (تحذير: عالية المخاطر)
-*   [[استراتيجية التداول بناءً على الأخبار]]: التداول بناءً على الأحداث الاقتصادية والسياسية.
-*   [[تحليل الارتباط]]: تحديد العلاقات بين الأصول المختلفة.
-'''خاتمة'''
-الهامش والحشو هما أدوات أساسية في CSS لتصميم الويب.  من خلال فهم الفرق بينهما وكيفية استخدامهما، يمكنك إنشاء تصميمات ويب جذابة وسهلة الاستخدام.  تدرب على استخدام هذه الخصائص لتطوير مهاراتك في تصميم الويب.
 [[Category:الفئة:CSS]]