غالباً ، برای تعیین اندازه فرورفتگی ها در صفحات HTML ، از قابلیت های زبان CSS (Cascading Style Sheets) استفاده می شود. اگرچه در خود زبان HTML چندین بقایای "ابتدایی" وجود دارد که در بعضی موارد امکان ایجاد تورفتگی را فراهم می کند. در زیر گزینه هایی وجود دارد که اغلب استفاده می شوند ، اما علاوه بر آنها ، انواع مختلفی از ترفندها وجود دارد که به شما امکان می دهد برای نشانه گذاری غیر استاندارد اسناد HTML فرورفتگی تعیین کنید.
لازم است
دانش اولیه زبانهای HTML و CSS
دستورالعمل ها
مرحله 1
عنصر صفحه ای را تعیین کنید که از آن خارج شود. به عنوان مثال ، اگر متن در داخل برچسب قرار گیرد … (بلوک) ، آنگاه این بلوک عنصر اصلی این متن خواهد بود و باید تورفتگی ها از مرزهای بلوک شمارش شود. و اگر متن (یا تصویر) درون عناصر بلوک (div ، li و غیره) یا درون خطی (span ، p و غیره) نباشد ، والدین آن متن سند (برچسب بدنه) خواهد بود. تعریف یک عنصر والد برای متن ضروری است زیرا این شخص است که باید توصیف سبک هایی را که تورفتگی ها را ایجاد می کند تنظیم کند. بیایید فرض کنیم متن شما در داخل یک بلوک div قرار گرفته است: متن نمونه
گام 2
از ویژگی حاشیه زبان CSS برای تنظیم حاشیه ، یعنی فاصله از مرزهای یک عنصر تا عناصر مجاور و همچنین مرزهای عنصر اصلی استفاده کنید. این فاصله را می توان به طور جداگانه برای بالشتک در هر طرف تنظیم کرد: margin-top - در بالا ، margin-right - در سمت راست ، margin-bottom - در پایین ، margin-left - در سمت چپ. برای مثال بالا ، ممکن است این کد css به صورت زیر باشد: div {
حاشیه بالا: 10px؛
margin-right: 15px؛
margin-bottom: 40px؛
margin-left: 70px؛
} در اینجا "div" یک انتخابگر است که مشخص می کند این سبک باید برای همه divهای کد سند اعمال شود. نحو CSS به شما امکان می دهد هر چهار خط را در یک ترکیب کنید: div {
حاشیه: 10px 15px 40px 70px؛
} مقادیر تورفتگی ها باید همیشه به این ترتیب مشخص شوند: ابتدا - در بالا ، سپس - در سمت راست ، پایین و چپ. اگر تورفتگی ها از هر طرف یکسان باشند ، کافی است مقدار را مشخص کنید یک بار: div {
حاشیه: 70px؛
} علاوه بر این ، می توانید یک حاشیه افقی شناور (یعنی چپ و راست) تنظیم کنید. این مورد می تواند بسیار مفید باشد وقتی که شما باید یک بلاک از عرض مشخص را دقیقاً در مرکز پنجره مرورگر تنظیم کنید. اگر عبارت CSS زیر را بنویسید ، مرورگر به طور خودکار میزان دندانه در هر دو طرف را تعیین می کند: div {
حاشیه: 0 خودکار؛
}
مرحله 3
از ویژگی padding برای تنظیم padding استفاده کنید ، که فاصله مرز عنصر تا عناصر قرار داده شده در داخل آن ، از جمله متن است. نحو این ویژگی دقیقاً مشابه ویژگی حاشیه است: div {
padding-top: 10px؛
padding-right: 15px؛
padding-bottom: 40px؛
padding-left: 70px؛
} یا div {
بالشتک: 10px 15px 40px 70px؛
}
مرحله 4
از خاصیت text-indent استفاده کنید تا تورفتگی اضافی برای سطر اول هر پاراگراف متن تنظیم شود. به عنوان مثال: div {
text-indent: 80px؛
}
مرحله 5
از ویژگی های hspace و vspace برچسب HTML img برای تنظیم تورفتگی افقی و عمودی از تصویر به عناصر خارجی استفاده کنید. به عنوان مثال ، مانند این:
مرحله 6
اگر لازم است فرورفتگی را از مرز سلولهای جدول بر روی محتوای آنها تنظیم کنید ، از ویژگی cellpadding برچسب جدول استفاده کنید. و ویژگی cellspacing فاصله بین سلولهای جدول را تنظیم می کند. مثلا:
1 | 2 |