دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS » خاصیت Padding و Margin در فیلم آموزش CSS به زبان فارسی
خاصیت Padding و Margin در فیلم آموزش CSS به زبان فارسی

خاصیت Padding و Margin در فیلم آموزش CSS به زبان فارسی

در جلسه قبل ID و Class رو گفتم و در این قسمت از فیلم آموزش CSS خاصیت یا ویژگی Padding و Margin در CSS را برای شما آموزش خواهم داد که یکی از مهم ترین ویژگی ها در CSS می باشند  .

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

margin و padding

margin و padding

ویژگی Margin در CSS :

margin ( مارجین ) به معنی حاشیه است و برای تنظیم حاشیه ها کاربرد دارد ، اگر شما همانند فیلم بالا دو تا عنصر داشته باشید که به هم چسبیده باشند و بخواهید به آن ها فاصله بدهید اول باید یک ID یا Class در HTML تعریف کند و بعد در CSS به آن استایل دهید .

مقدار margin را می توانید با پیکسل ( picture element ) تعیین کنید که مرسوم ترین مقدار است .

مقدار margin را می توانید به صورت درصد تعیین کنید مثلاً   %20 ، %40

مقدار margin را می توانید به صورت Points تعیین کنید مثلاً  3pt ، 7pt و….  ( هر pt برابر 1.72 اینچ است  ) .

با استفاده از margin در CSS می توان به هر کدام از آن ها از قسمت حاشیه فاصله داد .  مانند کد زیر :

کد HTML :

کد CSS :

اگر margin یک مقدار داشته باشد این یعنی از همه جهات ( بالا ، راست ، پایین ، چپ ) این مقدار به اون عنصر اعمال شود .

اگر مقدار margin را برابر auto در نظر بگیرید به صورت پیش فرض مرورگر فاصله از جهات بالا ، راست ، پایین ، چپ را برای عنصر در نظر می گیرد .

ولی شما می توانید فقط به یک جهت از عنصر هم margin بدهید مثلاً می توانید بگویید عنصر قثز از بالا فاصله بگیرد برای این کار از margin-top استفاده می کنیم مانند کد زیر :

اگر بخواهید فقط از سمت راست فاصله بدهید باید از margin-right استفاده کنید و ویا اگر می خواهید از سمت چپ فاصله بدهید از margin-left و برای قاصله از پایین از margin-bottom استفاده کنید همانند سورس کد زیر :

اما به جای این که از جهت های بالا ، راست ، پایین ، چپ استفاده کنیم می توانیم به صورت یکجا و مختصر به همه اون جهات مقدار بدهیم مانند کد زیر  :

مقادیر margin در کد بالا به ترتیب نشانگر جهات بالا ( top ) راست ( right ) پایین ( bottom ) چپ ( left ) است .

ویژگی Padding در CSS

padding به معنی لایه است و Padding فاصله از داخل بلاک را مشخص می کند مثلاً اگر بخواهید مطالب داخل یک عنصر از کناره به میزان 5 پیکسل فاصله داشته باشند کافیست برای آن یک padding بنویسید و مقدار دهید مانند کد زیر :

نحوه مقدار دهی Padding هم شبیه margin است و همه نکاتی که در بالا گفتم برای padding هم کاربرد دارد .

تفاوت margin و padding

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

فیلم آموزش خاصیت Padding و Margin را می توانید از لینک زیر دانلود کنید .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

عاشق برنامه نویسی

نظرات کاربران :



جواب سوال چیه ؟ *