فاصله از بیرون و درون–1# Margin And Paddin in css

در css بعضی اوقات نیاز هست تا یک المان را نسبت به المان های اطراف آن فاصله دهیم ، در css برای ایجاد فاصله مابین المان ها از margin و برای ایجاد فاصله محتوای یک المان نسبت به اطراف آن از padding  استفاده می شود .

در قسمت اول این مقاله خواهیم پرداخت به margin و نحوه استفاده از آن در css .

فاصله از بالا (margin-top) :

برای تنظیم فاصله خارجی  المان از بالا استفاده میشود . با تنظیم این خصوصیت برای یک المان ، المان مورد نظر در هر نقطه ای از صفحه که باشد به اندازه تعیین شده از طرف بالا فاصله می گیرد .

div.blue

{

Margin-top:100px;

}

دستور فوق باعث می شود المانی div ی که کلاس blue دارد به اندازه 100px از بالا فاصله بگیرد .

Margin-Top

فاصله از راست (margin-right) :

برای تنظیم فاصله خارجی المان از طرف راست  استفاده میشود . با تنظیم این خصوصیت برای یک المان ، المان مورد نظر در هر نقطه ای از صفحه باشد به اندازه تعیین شده از طرف راست فاصله می گیرد .

div.blue

{

Margin-right:100px;}

margin-right

دستور  css  فوق باعث می شود المانی div ی که کلاس blue دارد به اندازه 100px از طرف راست فاصله بگیرد .

فاصله از پایین (margin-bottom) :

برای تنظیم فاصله خارجی المان از طرف پایین  استفاده میشود . با تنظیم این خصوصیت برای یک المان ، المان مورد نظر در هر نقطه ای از صفحه باشد به اندازه تعیین شده از طرف پایین فاصله می گیرد .

margin-bottom

فاصله از چپ (margin-left) :

برای تنظیم فاصله خارجی المان از طرف چپ  استفاده میشود . با تنظیم این خصوصیت برای یک المان ، المان مورد نظر در هر نقطه ای از صفحه باشد به اندازه تعیین شده از طرف چپ فاصله می گیرد .

margin-left

خلاصه نویسی : 

می توان تمام چهار حالت فاصله خارجی (margin)  را به صورت خلاصه نوشت که این کار باعث بهینگی حجم کد هایی css می شود .

شکل کلی خلاصه نویسی margin به صورت زیر می باشد :

margin: top/right/bottom/left;

می توان چهار فاصله مورد نظر را با جدا کردن آنها با حداقل یک فاصله (space) در یک خط نوشت . در دستور بالا به جای کاراکتر / باید کاراکتر فاصله قرار گیرد .

 margin : 10px 100px 200px 5px;

- مقدار اول (10px) برای فاصله از بالا .

- مقدار دوم (100px) برای فاصله از راست .

- مقدار سوم (200px) برای فاصله از پایین .

- مقدار چهارم (5px) برای فاصله از چپ.

ترتیب مقادیر مهم می باشد سعی کنید ترتیب مقادیر را بخاطر بسپارید. 

تنظیم فاصله چهار طرف با یک مقدار :

Margin :10px;

 برای هر چهار طرف (top-right-bottom-left) مقدار 10px را تنظیم می کند.دستور فوق خلاصه ترین روش برای نوشتن فاصله می باشد .کاربرد آن زمانی است که بخواهیم مقداری یکسان را برای فاصله هر چهار طرف تعیین نماییم.

تنظیم فاصله چهار طرف با دو مقدار :

margin: top/bottom left/right;

margin :10px 20px;

اگر فقط دو مقدار برای margin بنویسیم ، مقدار اول را برای بالا و پایین (top-bottom) و مقدار دوم را برای راست-چپ (right-left) تنظیم میکند .کاربرد این روش زمانی است که بخواهیم مقداری یکسان را برای طرف "بالا و پایین " و طرف های " راست و چپ " در نظر بگیریم .

 تنظیم فاصله چهار طرف با سه مقدار :

margin: top left/right bottom;

اگر برای margin  فقط سه مقدار بنویسیم ، مقدار اول را برای فاصله از بالا  و مقدار دوم را برای فاصله از " راست و چپ " و مدار سوم را برای پایین در نظر می گیرد .

برای اینکه این روش را بهتر درک کنید : این روش همان روش چهار مقداری است با این تفاوت که یکی از آنها یعنی آخر را ننوشته است و مقدار آخر هم مربوط می شود به طرف چپ ، به همین دلیل مقدار تعیین شده برای طرف مقابل آن را برای طرف چپ تعیین میکند یعنی مقدار راست را برای طرف چپ هم در نظر می گیرد  .

 


توسط : عثمان رحیمی  4 ماه قبل ، سه شنبه 29 مهر 1393 ساعت 13:17  0  1450

نظر شما برای ما مهم است و به ما در بهبود سایت کمک میکند.


ارسال نظر
  • نام (اختیاری ) :
  • پست الکترونیک :
  • توضیحات :

مطالب مرتبط