بایگانی برچسب: s

HTML و CSS

آموزش برنامه نویسی padding-margin – CSS در CSS

درود
در این جلسه ی آموزشی قصد دارم خصوصیات margin و Padding در CSS یا به عبارتی box model در css رو خدمتتون آموزش بدم. البته box model شامل border هم میشه که اون رو جلسات گذشته آموزش دادم .
11
Margin
توسط این خاصیت شما میتونید یک فاصله بین عنصر فرزند و عنصر والد ایجاد کنید. به کد زیر دقت کنید:

در اینجا عنصر والد رو body قرار میدیم و عنصر فرزند ChildElement در نظر میگیریم . اگر ما بخوایم این کادر رو از حاشیه ی Body به اندازه ی ۵۰ پیکسل فاصله بدیم باید margin رو برای این عنصر ۵۰px در نظر بگیریم.

در این صورت کادر childElement به اندازه ۵۰ پیکسل از سمت چپ ، راست ، بالا و پایین از body فاصله میگیره . به طور کلmargin رو فاصله ی بیرونی می نامیم .

قاعده دستوری Margin

Margin : margin-top margin-right margin-bottom margin-left

مثال margin : 10px 20px 15px 40px

در این مثال ما به اندازه ی ۱۰ پیکسل از بالا ۲۰پیکسل از راست ۱۵ پیکسل از پایین و ۴۰ پیکسل از سمت چپ بین عنصر والد و فرزند فاصله ایجاد کردیم .

نحوه ی نوشتن margin به اشکال مختلف

margin:10px 5px 15px 20px;
سمت بالا ۱۰px
سمت راست ۵px
سمت پایین ۱۵px
سمت چپ ۲۰px

margin:10px 5px 15px;
سمت بالا ۱۰px
سمت راست و چپ ۵px
سمت پایین ۱۵px

margin:10px 5px;
سمت بالا و پایین ۱۰px
سمت راست و چپ ۵px

margin:10px;
سمت بالا و راست و پایین و چپ ۱۰px

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

Margin-top : فاصله از بالا

Margin-right: فاصله از راست

Margin-bottom : فاصله از پایین

Margin-left: فاصله از چپ

نمونه : margin-top : 20px

در این نمونه شما تنها از سمت بالا یک فاصله ۲۰ پیکسلی ایجاد میکنید .

Padding

توسط این خاصیت شما می تونید یک فاصله ی داخلی ایجاد کنید . به کد زیر دقت کنید :

در اینجا عنصر والد مد نظر ما نیست . ما یک فاصله از لبه ی عنصر فرزند به داخل ایجاد می کنیم .

در مثال بالا ما فاصله ای به اندازه ۳۰ پیکسل بین لبه ی کادر و محتوای درون کادر ایجاد کردیم . همونطور که در تصویر ابتدای مقاله میبینید ، padding فاصله ی محتوای درون کادر رو با لبه ی کادر تعیین می کنه . به طور کل padding رو فاصله ی داخلی می نامیم .

قاعده دستوری Padding

Padding : Padding-top Padding-right Padding-bottom Padding-left

مثال Padding : 10px 20px 15px 40px

در این مثال ما به اندازه ی ۱۰ پیکسل از بالا ۲۰پیکسل از راست ۱۵ پیکسل از پایین و ۴۰ پیکسل از سمت چپ از لبه ی کادر تا محتوای داخل کادر فاصله ایجاد کردیم.

نحوه ی نوشتن Padding به اشکال مختلف

Padding :10px 5px 15px 20px;
سمت بالا ۱۰px
سمت راست ۵px
سمت پایین ۱۵px
سمت چپ ۲۰px

Padding :10px 5px 15px;
سمت بالا ۱۰px
سمت راست و چپ ۵px
سمت پایین ۱۵px

Padding :10px 5px;
سمت بالا و پایین ۱۰px
سمت راست و چپ ۵px

Padding :10px;
سمت بالا و راست و پایین و چپ ۱۰px

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

Padding-top : فاصله از بالا

Padding-right: فاصله از راست

Padding-bottom : فاصله از پایین

Padding-left: فاصله از چپ

نمونه : padding-right : 20px

در این نمونه شما تنها از سمت راست یک فاصله ۲۰ پیکسلی ایجاد میکنید .
و بار دیگر خیلی ممنون که به وبسایت پنگوئن اومدید و وقت گران بهاتون در اختیار ما گذاشته اید.
تا درودی دیگر بدرود.