CSS / الهوامش الداخلية (padding)

الناشر :كودا فوكس -

CSS / الهوامش الداخلية

مفهوم الهامش الداخلي

الهامش الداخلي ( Padding ) هو المسافة الفارغة التي يمكن وضعها بين محتوى العنصر و حدوده.

CSS / الهوامش الداخلية (padding)


حجم الهامش الداخلي للعنصر يمكنك تحديده من كل الجهات أو من جهات محددة.

There is padding 50px between the text and borders

إضافة هامش داخلي من جهة محددة

الخصائص التالية تستخدم لتحديد حجم الهامش الداخلي من جهة محددة:

  • padding-top لتحديد حجم الهامش الداخلي للعنصر من الأعلى.
  • padding-bottom لتحديد حجم الهامش الداخلي للعنصر من الأسفل.
  • padding-right لتحديد حجم الهامش الداخلي للعنصر من الجهة اليمنى.
  • padding-left لتحديد حجم الهامش الداخلي للعنصر من الجهة اليسرى.

فيما يلي القيم التي يمكن وضعها كحجم للهامش الداخلي:

  • inherit لجعل العنصر يرث نسبة الهامش الداخلي من العنصر الموجود فيه.
  • length نقصد بها وضع رقم بوحدة قياس محددة مثل px، pt، cm، % ليمثل حجم الهامش الداخلي.

نود الإشارة إلى أن قيمة الهامش الداخلي لا يمكن أن تكون بالسالب، فمثلاً ممنوع أن تكون -5px أو -20% لأن هذه القيم أصغر من صفر. و في حال وضعت قيمة بالسالب فإن المتصفح سيرفض القيمة، أي سيعتبرها Invalid property value.

رؤية تأثير الهامش الداخلي

لملاحظة تأثير الهامش الداخلي الذي أضفته العنصر، بمعنى لملاحظة كم تم إبعاد محتوى العنصر عن حدوده ( Border ) يمكنك إظهار الحدود.

في المثال التالي قمنا بإضافة حدود و هامش داخلي للعنصر الذي يملك الكلاس demo.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
	<head>
        <style>
.demo {
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 15px;
	padding-left: 15px;
	border: 1px solid gray;
}
        </style>
	</head>
	<body>
        <h2>CSS padding sides</h2>
        <p class="demo">This element has a top padding of 20px,
            a bottom padding of 20px, a right padding of 15px,
			and a left padding of 15px.</p>
    </body>
</html>

تحديد الهامش الداخلي من كل الجهات بسطر واحد

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

في المثال التالي قمنا بإضافة هامش داخلي للعنصر بمقدار 30 بكسل من كل الجوانب.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
	<head>
        <style>
p {
	padding: 30px;
	border: 1px solid gray;
}
        </style>
	</head>
	<body>
        <h2>CSS padding shorthand</h2>
        <p>This element has a 30px padding on all sides.</p>
    </body>
</html>

إذا قمت بتمرير قيمتين للخاصية padding سيحدث التالي:

  • القيمة الأولى ستمثل حجم الهامش الداخلي جهتي الأعلى و الأسفل.
  • القيمة الثانية ستمثل حجم الهامش الداخلي جهتي اليمين و اليسار.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
	<head>
        <style>
p {
	padding: 20px 15px;
	border: 1px solid gray;
}
        </style>
	</head>
	<body>
        <h2>CSS padding shorthand</h2>
        <p>This element has a 20px padding on top and bottom
			and a 15px padding on right and left.</p>
    </body>
</html>

إذا قمت بتمرير ثلاث قيم للخاصية padding سيحدث التالي:

  • القيمة الأولى ستمثل حجم الهامش الداخلي في الأعلى.
  • القيمة الثانية ستمثل حجم الهامش الداخلي جهتي اليمين و اليسار.
  • القيمة الثالثة ستمثل حجم الهامش الداخلي في الأسفل.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
	<head>
        <style>
p {
	padding: 20px 15px 10px;
	border: 1px solid gray;
}
        </style>
	</head>
	<body>
        <h2>CSS padding shorthand</h2>
        <p>This element has a 20px padding on the top,
			a 15px padding on right and the left
			and a 10px padding on the bottom.</p>
    </body>
</html>

إذا قمت بتمرير أربع قيم للخاصية padding سيحدث التالي:

  • القيمة الأولى ستمثل حجم الهامش الداخلي في الأعلى.
  • القيمة الثانية ستمثل حجم الهامش الداخلي جهة اليمين.
  • القيمة الثالثة ستمثل حجم الهامش الداخلي في الأسفل.
  • القيمة الرابعة ستمثل حجم الهامش الداخلي جهة اليسار.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
	<head>
        <style>
p {
	padding: 20px 15px 10px 5px;
	border: 1px solid gray;
}
        </style>
	</head>
	<body>
        <h2>CSS padding shorthand</h2>
        <p>This element has a 20px padding on the top,
			a 15px padding on the right,
			a 10px padding on the bottom
			and a 10px padding on the left.</p>
    </body>
</html>

إزالة الهامش الداخلي للعنصر

إذا أردت إزالة الهامش للعنصر من جهة محددة، يمكنك وضع قيمة الهامش الخاصة به تساوي 0.

في المثال التالي قمنا بإزالة الهامش الداخلي من كل الجهات.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
	<head>
        <style>
p {
	padding: 0;
	border: 1px solid gray;
}
        </style>
	</head>
	<body>
        <h2>CSS padding shorthand</h2>
        <p>This element has no padding.</p>
    </body>
</html>

في المثال التالي قمنا بإضافة هامش داخلي في أعلى و أسفل العنصر بمقدار 20 بيكسل و قمنا بإزالة أي هامش من الجانبين الأيمن و الأيسر.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

<!DOCTYPE html>
<html>
	<head>
        <style>
p {
	padding: 20px 0;
	border: 1px solid gray;
}
        </style>
	</head>
	<body>
        <h2>CSS padding shorthand</h2>
        <p>This element has a 20px padding on top and bottom.</p>
    </body>
</html>

إذا جعلت قيمة الهامش الداخلي تساوي 0 أو 0% أو 0px إلخ.. فكلها تعني صفر و هنا يفهم المتصفح أنك لا تريد عرض أي هامش.

التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال