امتیاز موضوع:
  • 12 رأی - میانگین امتیازات: 2.92
  • 1
  • 2
  • 3
  • 4
  • 5
تنظیم حاشیه و فاصله از لبه در عناصر صفحه
#1

[تصویر:  Action-file-new-icon.png]
حاشیه ها

[تصویر:  document-margins-icon.png] margin-left
این گزینه به ما اجازه وی دهد تا برای هر یک از اجزای صفحه حاشیه چپ مشخصی را تعیین کنیم. در حقیقت این گزینه مقدار فاصله اجزا را از سمت چپ صفحه مشخص می کند. به یک مثال در این مورد توجه کنید:


کد:
<div style="margin-left:200px; border:double">این DIV دویست پیکسل از سمت چپ صفحه فاصله دارد.</div>

همانطور که می بینید کد بالا یک DIV را با کادر مضاعف و 200 پیکسل حاشیه از چپ نشان می دهد:

[تصویر:  13459073271.bmp]


[تصویر:  document-margins-icon.png] margin-right
این گزینه هم مانند گزینه بالا عمل می کند با این تفاوت که مقدار حاشیه را از سمت راست تعیین می کند:

کد:
<div style="margin-right:200px; border:double">این DIV دویست پیکسل از سمت راست صفحه فاصله دارد.</div>

[تصویر:  13459075051.bmp]


[تصویر:  document-margins-icon.png] margin-top
این گزینه هم مانند گزینه های بالا کار می کند با این تفاوت که میزان حاشیه را از بالای صفحه تعیین می کند:

کد:
<div style="margin-top:100px; border:double">این DIV صد پیکسل از بالای صفحه فاصله دارد.</div>

[تصویر:  13459076991.bmp]




[تصویر:  document-margins-icon.png] margin-bottom
این گزینه هم مانند گزینه های بالا کار می کند با این تفاوت که میزان حاشیه را از پایین صفحه تعیین می کند:


کد:
<div style="margin-bottom:100px; border:double">این DIV صد پیکسل از پایین صفحه فاصله دارد.</div>

[تصویر:  13459078881.bmp]




[تصویر:  Action-file-new-icon.png]
Padding

[تصویر:  text-padding-right-icon.png] padding-right
پارامتر padding در CSS مشابه شناسه cellpadding در جدولهاست که با این تفاوت که می توان آنرا برای بالا، پایین، چپ و راست به صورت جداگانه تعریف کرد به جای اینکه به صورت یکجا تعیین شود. در اینجا می توانید یک نمونه از padding را که برای راست تعریف شده است را ببینید:


کد:
<div style="padding-right:100px; border-style:double">برای این DIV معادل 100 پیکسل padding تعریف شده است.</div>

[تصویر:  13459085501.bmp]


[تصویر:  text-padding-top-icon.png] padding-top
مانند قسمت قبل است با این تفاوت که به جای راست برای بالا تعریف می شود:


کد:
<div style="padding-top:30px; border-style:double">برای این DIV معادل 30 پیکسل padding تعریف شده است.</div>

[تصویر:  13459088911.bmp]



[تصویر:  text-padding-left-icon.png] padding-left
مانند padding-right است با این تفاوت که برای چپ تعیین می شود.



[تصویر:  text-padding-bottom-icon.png] padding-bottom
مانند padding-top است با این تفاوت که برای پایین تعیین می شود.




به یاد داشته باشید که در صورتی که پارامتر padding بدون right, left, top یا bottom به کار رود مقدار وارد شده برای هر چهار جهت مورد استفاده قرار می گیرد، البته در مورد margin هم به همین صورت است:


کد:
<div style="padding:35px; width:250px; border-style:solid ">در این DIV پارامتر padding بر روی هر چهار جهت تأثیر میگذارد.</div>

این هم نتیجه:


[تصویر:  13459092851.bmp]
پاسخ


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  تنظیمات موقعیت عکس زمینه عناصر صفحه با CSS انجمن مخ ها 0 232 26-08-2012، 07:00 PM
آخرین ارسال: انجمن مخ ها
  تغییر رنگ و تصویر زمینه عناصر HTML با CSS انجمن مخ ها 0 264 26-08-2012، 06:24 PM
آخرین ارسال: انجمن مخ ها
  تنظیم فونت صفحه با استفاده از استایل(CSS) انجمن مخ ها 0 232 26-08-2012، 02:29 PM
آخرین ارسال: انجمن مخ ها
  تغییر موقعیت عناصر صفحه با استفاده از CSS انجمن مخ ها 0 216 25-08-2012، 10:57 PM
آخرین ارسال: انجمن مخ ها
  نحوه ایجاد کادر برای عناصر صفحه با استفاده از استایل انجمن مخ ها 1 280 25-08-2012، 07:32 PM
آخرین ارسال: انجمن مخ ها
  تنظیم عرض، ارتفاع، و overflow با CSS انجمن مخ ها 0 200 24-08-2012، 05:40 PM
آخرین ارسال: انجمن مخ ها

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان