حاشیه
ها
margin-left
این گزینه به ما اجازه وی دهد تا
برای هر یک از اجزای صفحه حاشیه چپ مشخصی را تعیین
کنیم. در حقیقت این گزینه مقدار فاصله اجزا را از سمت
چپ صفحه مشخص می کند. به یک مثال در این مورد توجه
کنید:
<div style="margin-left:200px;
border:double">این DIV دویست پیکسل از سمت چپ
صفحه فاصله دارد.</div>
همانطور که می بینید کد بالا یک DIV
را با کادر مضاعف و 200 پیکسل حاشیه از چپ نشان می
دهد:
این DIV دویست پیکسل از سمت چپ
صفحه فاصله دارد.
margin-right
این گزینه هم مانند گزینه بالا عمل
می کند با این تفاوت که مقدار حاشیه را از سمت راست
تعیین می کند:
<div style="margin-right:200px;
border:double">این DIV دویست پیکسل از سمت راست
صفحه فاصله دارد.</div>
همانطور که می بینید کد بالا یک DIV
را با کادر مضاعف و 200 پیکسل حاشیه از راست نشان می
دهد:
این DIV دویست پیکسل از سمت راست
صفحه فاصله دارد.
margin-top
این گزینه هم مانند گزینه های بالا
کار می کند با این تفاوت که میزان حاشیه را از بالای
صفحه تعیین می کند:
<div style="margin-top:100px;
border:double">این DIV صد پیکسل از بالای صفحه
فاصله دارد.</div>
این DIV صد پیکسل از بالای صفحه
فاصله دارد.
margin-bottom
این گزینه هم مانند گزینه های بالا
کار می کند با این تفاوت که میزان حاشیه را از پایین
صفحه تعیین می کند:
<div style="margin-bottom:100px;
border:double">این DIV صد پیکسل از پایین صفحه
فاصله دارد.</div>
این DIV صد پیکسل از پایین صفحه
فاصله دارد.
Padding
padding-right
پارامتر padding در CSS مشابه شناسه
cellpadding در جدولهاست که با این تفاوت که می توان
آنرا برای بالا، پایین، چپ و راست به صورت جداگانه
تعریف کرد به جای اینکه به صورت یکجا تعیین شود. در
اینجا می توانید یک نمونه از padding را که برای راست
تعریف شده است را ببینید:
<div style="padding-right:100px;
border-style:double">برای این DIV معادل 100
پیکسل padding تعریف شده است.</div>
می توانید نتیجه را در اینجا مشاهده
کنید:
برای این DIV معادل 100 پیکسل
padding تعریف شده است.
padding-top
مانند قسمت قبل است با این تفاوت که
به جای راست برای بالا تعریف می شود:
<div style="padding-top:30px;
border-style:double">برای این DIV معادل 30 پیکسل
padding تعریف شده است.</div>
می توانید نتیجه را در اینجا مشاهده
کنید:
برای این DIV معادل 30 پیکسل
padding تعریف شده است.
padding-left
مانند padding-right است با این
تفاوت که برای چپ تعیین می شود.
padding-bottom
مانند padding-top است با این تفاوت
که برای پایین تعیین می شود.
به یاد داشته باشید که در صورتی که
پارامتر padding بدون right, left, top یا bottom به
کار رود مقدار وارد شده برای هر چهار جهت مورد استفاده
قرار می گیرد، البته در مورد margin هم به همین صورت
است:
<div style="padding:35px;
width:250px; border-style:solid ">در این DIV
پارامتر padding بر روی هر چهار جهت تأثیر
میگذارد.</div>
این هم نتیجه:
در این DIV پارامتر padding بر روی
هر چهار جهت تأثیر میگذارد.