إذا أردنا إضافة حشوة في مستند Html باستخدام CSS الداخلي، فعلينا اتباع الخطوات الموضحة أدناه. باستخدام هذه الخطوات البسيطة، يمكننا بسهولة إضافة الحشو.
الخطوة 1: أولاً، يتعين علينا كتابة كود Html في أي محرر نصوص أو فتح ملف Html الموجود في محرر النصوص الذي نريد إضافة الحشوة إليه.
Add the Padding in Html Hello User!... You are at JavaTpoint Site... The text on which we want to add padding.
الخطوة 2: الآن، يتعين علينا وضع المؤشر في علامة الرأس مباشرة بعد علامة العنوان لمستند Html ثم تحديد العلامة كما هو موضح في الكتلة التالية.
Add the Padding in Html
الخطوه 3: الآن، يتعين علينا تحديد خاصية الحشو في محدد المعرف الذي تم تحديده قبل النص الذي نريد إضافة الحشو إليه مباشرةً.
فيما يلي الخصائص الخمس المختلفة التي يمكننا من خلالها تطبيق الحشو على كل جانب:
أنا. الحشو لليسار:
إذا أردنا تطبيق الحشو الأيسر فقط على عنصر ما، فعلينا استخدامه فقط الحشو لليسار الخاصية في محدد الهوية. ومن ثم علينا تعيين قيمة واحدة فقط للخاصية كما هو موضح في المثال التالي:
أحجام الخطوط في اللاتكس
Add the left Padding in Html div { border: 3px solid blue; padding-left: 75px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 75pixel left padding. اختبره الآن يظهر ناتج الكود أعلاه الذي يستخدم خاصية padding-left في لقطة الشاشة التالية:
ثانيا. الحشو لليمين:
إذا أردنا تطبيق الحشو الصحيح فقط على عنصر ما، فيجب علينا استخدامه فقط الحشو الصحيح الخاصية في محدد الهوية. ومن ثم علينا تعيين قيمة واحدة فقط للخاصية كما هو موضح في المثال التالي:
Add the right Padding in Html div { border: 3px solid blue; padding-right: 250px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel right padding. اختبره الآن يظهر ناتج الكود أعلاه الذي يستخدم خاصية حق الحشو في لقطة الشاشة التالية:
ثالثا. أعلى الحشو:
إذا أردنا تطبيق الحشو العلوي فقط على عنصر ما، فيجب علينا استخدامه فقط أعلى الحشو الخاصية في محدد الهوية. ومن ثم علينا تعيين قيمة واحدة فقط للخاصية كما هو موضح في المثال التالي:
Add the Top Padding in Html div { border: 3px solid orange; padding-top: 25px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 25pixel top padding. اختبره الآن يظهر ناتج الكود أعلاه الذي يستخدم خاصية الحشو العلوي في لقطة الشاشة التالية:
رابعا. أسفل الحشو:
إذا أردنا تطبيق الحشوة السفلية فقط على عنصر ما، فعلينا أن نستخدمها فقط أسفل الحشو الخاصية في محدد الهوية. ومن ثم علينا تعيين قيمة واحدة فقط للخاصية كما هو موضح في المثال التالي:
Add the Bottom Padding in Html div { border: 3px solid orange; padding-bottom: 250px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel bottom padding. اختبره الآن يظهر ناتج الكود أعلاه الذي يستخدم خاصية الحشو السفلي في لقطة الشاشة التالية:
ضد الحشو:
إذا أردنا تطبيق حشوات مختلفة على الجوانب الأربعة (أعلى، أسفل، يسار، يمين)، فيجب علينا تحديد القيم الأربع في خاصية الحشو.
padding: 10px 50px 75px 200px;
إذا قمنا بتحديد القيمتين، فإن محرر Html يطبق الحشوة الأولى على الأعلى والأسفل والحشوة الثانية على اليسار واليمين.
padding: 100px 50px;
إذا قمنا بتحديد قيمة فقط في سمة الحشو، فسيقوم محرر Html بتطبيق نفس الحشو على الجوانب الأربعة.
padding: 100px;
أمثلة على خاصية الحشو:
مثال 1: يستخدم المثال التالي قيمة واحدة في خاصية الحشو لتعيين نفس الحشو على الجوانب الأربعة.
مخطوطة لكل منهما
Set one value to apply same padding div { border: 3px solid gray; padding: 100px; background-color: orange; } Hello User!... You are at JavaTpoint Site... The text on which we set the 100pixel padding to all the four side. اختبره الآن يظهر ناتج المثال 1 في لقطة الشاشة التالية:
مثال 2: يستخدم المثال التالي قيمتين في حشوة الخاصية لتعيين نفس الحشو على الجوانب المقابلة.
Specify two value to apply same padding on opposite sides div { border: 3px solid black; padding: 100px 50px; background-color: gray; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 100 pixel padding to top and bottom and 50 pixels to left and right side. اختبره الآن يظهر ناتج المثال 2 في لقطة الشاشة التالية:
مثال 3: يستخدم المثال التالي أربع قيم في خاصية الحشو لتعيين الحشو المختلف لجميع الجوانب الأربعة.
Specify four value to apply different padding on opposite sides div { border: 3px solid blue; padding: 10px 50px 75px 200px; background-color: red; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 10 pixel padding to top, 50 pixel padding to right, 75 pixel padding to bottom and 200 pixels padding to left side. اختبره الآن يظهر ناتج المثال 3 في لقطة الشاشة التالية:
