حاشیه داخلی و خارجی

حاشیه داخلی و خارجی

تمامی عناصر html می توانند دارای یک حاشیه داخلی (padding) و یک حاشیه خارجی (margin) باشند.

با این دو پارامتر شما می توانید محل قرار گیری عناصر، متن ها و عناصر داخل هر عنصر را تغییر داده و به محل مورد نظرتان ببرید.
margin padding
margin و padding همچون border، دور تا دور یک عنصر را از داخل و خارج آن فرا گرفته و شما می توانید margin و padding را به دو صورت مقدار دهی کنید، به صورت تکی یا کلی که در زیر به آن اشاره کردیم :

element{

padding-top:value; padding-right:value; padding-bottom:value; padding-left:value;

or

padding : padding-top(value)  padding-right(value)  padding-bottom(value)  padding-left(value)

}

element{

margin-top:value; margin-right:value; margin-bottom:value; margin-left:value;

or

margin : margin-top(value)  margin-right(value)  margin-bottom(value)  margin-left(value)

}

مـــهم margin در عناصر inline و padding در عناصری که خاصیت box-sizing در آن ها مقدار border-box نیست میتوانند شما را به چالش بکشند!

مـــهم برای قرار دادن یک جعبه در وسط عرض جعبه والد شما می توانید از خاصیت حاشیه خارجی یا margin استفاده کنید در صورتی که هر دو عنصر دارای خاصیت display:inline نباشند. در زیر طریقه استفاده از margin را مشاهده می کنید.

child element{

margin: 0 auto;

or

margin-right:auto;  margin-left:auto;

}

برای کسب اطلاعات بیشتر و امتحان مثال های حاشیه داخلی و حاشیه خارجی بر روی آن ها کلیک کنید.

 

صفحه بعدیصفحه قبلی

 

تاریخ آخرین بروز رسانی:2017/12/30

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *