استفاده از Padding و Margin در طراحی سایت

Padding و Margin در طراحی سایت

تمام فضا های در طراحی سایت با استفاده از باکس ها و Div ها ایجاد می شوند که دارای عرض و ارتفاع معینی می باشند . اما تمام این باکسها با استفاده از دو کد Padding و Margin در css ازهم جدا می شوند که شامل فاصله محتوای درون باکس , فضای اطراف و حاشیه تمام موارد است .

Padding و Margin در طراحی سایت دو کد بسیار کاربردی Css می باشند که استفاده درست از آنها کاربر پسند بودن و جذابیت سایت را بالا می برد .این دو کد در طراحی سایت تفاوت هایی در کاربردشان دارند که در زیر به توضیح این دو کد می پردازیم.

استفاده از Padding در طراحی سایت

Padding فاصله بین متن یا هر محتوای دیگر درون باکس با حاشیه های باکس است . هم چنین برای آراستن ظاهری وب سایت در طراحی سایت نیز کاربرد دارد. در زیر نمایش دقیق از Padding را با کد و تصویر توضیح می دهم.

Div

{

   Width:400px

   Margin:10px 0 10px 0

   Border:3px solid #813d0c

   Padding:15 px

{

در کد بالا ما یک DIV را با پهنای 400 پیکسل ایجاد کرده ایم در شکل زیر دقیقا کدهای زیر اعمال شده است . که شامل Margin ده پیکسل به همراه یک حاشیه با کد رنگ813d0c (border) 3 پیکسلی به همراه فاصله متن داخلی از حاشیه (padding) 15 پیکسل می باشد.

استفاده از Margin در طراحی سایت

بر خلاف padding که فاصله داخلی باکس را شامل می شود Margin فاصله ی باکس از فضای اطراف را شامل می شود که این فضای خارجی می تواندیک باکس دیگر نیز باشد . کد Margin را می توانیم به چند صورت استفاده کنیم

Margin-top که فاصله خارحی از بالا را اعمال می کند . Margin-bottom فاصله خارجی از پایین باکس را اعمال می کند. Margin-left فاصله از طرف چپ می باشد و همان طور Margin-right فاصله از سمت راست را شامل می شود. البته به دو صورت دیگر می توانیم از Margin استفاه نماییم. در شکل زیر می توانید کد زیر را ببینید:

Margin:10px 8px 5px 15px

همچنین می توانیم از این کد نیز استفاده نماییم در شکل زیر نیز می توانید ببینید:

Margin:10px 5px

حال اگر از کد زیر استفاه کنیم به هر چهار حالت Margin اعمال می شود

Margin:10px

توجه داشته باشید که تمام موارد که در مورد Margin گفته شد روی Paddin هم قابل اجراست بدین صورت که :

Padding-left , padding-right , padding-top ، Padding-bottom و همچنین کد های زیر نیز مثل Margin اعمال می شود.

Padding:10px 5px 4px 11px

Padding:10px 7px

Padding:10px

استفاده از Padding و Margin در طراحی سایت به زیبایی وب سایت شما کمک بزرگی می کند که در نتیجه موجب بهبود سئو سایت و بهینه سازی وبسایت شما خواهد شد .