كيفية رسم خط عمودي لفصل نص HTML عن الصورة

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

1

قم بإعداد صورتك داخل النص وأضف علامة سمة "style". على سبيل المثال ، قد يبدو رمز HTML الخاص بصورتك على النحو التالي:

2

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

هذا إعداد حد مختزل - تحدد القيمة الأولى عرض الحد ، وتحدد القيمة الثانية نوع الحد وتعين القيمة الثالثة اللون. يمكن أن تكون الحدود صلبة أو منقطة أو متقطعة أو مزدوجة ؛ أو يمكنك تحديد حد ثلاثي الأبعاد مثل groove أو ridge أو inset أو outset.

إذا كنت تريد تطبيق الحد على جانب واحد فقط لإنشاء خط عمودي حقيقي ، فيمكنك استخدام "حد يسار" أو "حد يمين" بدلاً من "حد".

3

أضف المساحة المتروكة لإنشاء مسافة بين الصورة والنص. إذا كنت تريد أن تكون الحدود على بعد 5 بكسل من الصورة ، أضف "padding: 5px؛" إلى علامة النمط الخاص بك. يمكنك تحديد المساحة المتروكة على جانب واحد فقط باستخدام ، على سبيل المثال ، "padding-left: 5px؛". إذا كنت تريد إنشاء مسافة بين الحد والنص ، فاستخدم هامشًا. ستحتاج أيضًا إلى تحديد عنوان URL لصورتك لعلامة "src". عند تجميعها معًا ، يمكن أن تبدو التعليمات البرمجية الخاصة بك كما يلي:

4

احفظ واختبر HTML لتتأكد من عرض الحد بالشكل الذي تريده.