وبلاگ داتیس دیزاین

ممکن است قبلا در مورد CSS box modeling شنیده باشید، مفهوم ساده ای دارد. به این تصویر نگاه کنید :

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

به طور خلاصه، padding فضای بین محتوا و border آن می باشد، یا فضای درون block محتوا است. margin خارج از block محتوا قرار می گیرد.

کل عرض یا ارتفاع برابر با margin + border + padding + محتوا می باشد. پس هنگامی که در حال طراحی layout با CSS هستید حتما این نکته را مد نظر داشته باشید.

ارسال به توییتر ارسال به فیس بوک اشتراک خوراک سایت ارسال به ایمیل دوستان