صفحه اصلی / css / اموزش کامل padding و margin و outline در css

اموزش کامل padding و margin و outline در css

اموزش کامل padding و margin و outline در css 

با سلام خدمت شما کاربران گرامی مجله اینترنتی شماسافت در این پست از مبحث برنامه نویسی – اموزش css  همراه شما هستیم با اموزش کامل padding و margin و outline در css که یکی از مباحث ابتدایی و بسیار مهم در css محسوب میشود در پایان این اموزش که در ادامه اموزش کار با border در css  می باشد شما به صورت کامل با box property که از قسمت های مهم کد نویسی و بسیار کاربردی می باشد اشنا میشوید.

 

قاب و قالب بندی یک عنصر در صفحه وب :

به صورت کلی برای یک عنصر وب قالب بندی شامل border – outline – padding – margin به صورت زیر می باشد.

اموزش کامل padding و margin و outline در css

اکنون که به کاربرد کلی این کد ها در css پی برده اید بهتر است تک تک را مورد بررسی قرار دهیم.

 

اموزش margin و padding :

 

۱-margin : 

 

div همراه margin

margin در css به طور کلی به منظور فاصله دادن یک عنصر از چهارسمت و یا به صورت تکی از هر سمت به کار می رود یکی از کاربرد های مهم margin وسط چین کردن عناصر می باشد که جایگذین تگ center در html5 و css3 شده است.

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

 

ترفند وسط چین کردن عناصر به وسیله margin در css (جایگذین تگ center):

یکی از راههای وسط چین کردن عناصر در گذشته استفاده از tag به نام center بود اما در html5 با حذف این تگ کد css جایگذین ان شد برای این کار می بایست از کد ساده margin:auto; استفاده کرد در این صورت عنصر به صورت خودکار از هرطرف به اندازه ی ممکن فاصله میگیرد تا وسط چین شود کد اطلاح شده و بهتر نیز در زیر امده است.

کلاس بالا را به هر عنصری بدهید این عنصر به صورت وسط چین در می اید.

 

۲-padding :

 

div همراه margin

و به همراه padding

padding در css یکی از پرکاربرد ترین کد های می باشد که باعث میشود متون و محتوا به دیواره عنصر پدر خود نچسبند و از ان فاصله بگیرند که کاربرد و کد نویسی ان به صورت زیر می باشد.

۳-outline : 

 

div همراه margin

و به همراه padding

و به همراه outine

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

اموزش border – قابل تعمیم به outline

 

ممنون از اینکه تا اخر این مطلب همراه ما بودید منتظر اموزش های جدید از سوی ما باشید برای این کار کانال تلگرام شماسافت shomasoft@ را می توانید در تلگرام جستجو یا از لینک زیر استفاده کنید. درضمن نظرات و سوالات خود را در قسمت دیدگاه ها می توانید ارسال کنید.

مطالب پیشنهادی:

قالب صفحه ۴۰۴ اموزش تگ های مهم html کار با خواص table در css اموزش کار با counter در css

برای دنبال کردن مطالب ما در کانال شماسافت عضو شوید.

عضویت

پاسخ دهید

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