جستجو برای:
  • صفحه نخست
  • مقالات آموزشی
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
  • قالب رایگان وردپرس
    • قالب فروشگاهی
    • قالب ویژه مشاغل
    • قالب آموزشی
    • قالب پزشکی
    • قالب شرکتی
    • قالب نمونه کار
    • قالب وبلاگی
    • قالب مجله خبری
    • قالب چند منظوره
    • قالب تک صفحه ای
  • افزونه وردپرس
    • آموزش رایگان المنتور
    • آموزش های ووکامرس
  • دوره های آموزشی
    • آموزش کسب درآمد اینترنتی
    • آموزش طراحی سایت با المنتور
    • آموزش جامع وردپرس
    • آموزش فارسی سازی قالب وردپرس
    • آموزش HTML-CSS مقدماتی
    • آموزش ووکامرس مقدماتی
 
افق وب
  • صفحه نخست
  • مقالات آموزشی
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
  • قالب رایگان وردپرس
    • قالب فروشگاهی
    • قالب ویژه مشاغل
    • قالب آموزشی
    • قالب پزشکی
    • قالب شرکتی
    • قالب نمونه کار
    • قالب وبلاگی
    • قالب مجله خبری
    • قالب چند منظوره
    • قالب تک صفحه ای
  • افزونه وردپرس
    • آموزش رایگان المنتور
    • آموزش های ووکامرس
  • دوره های آموزشی
    • آموزش کسب درآمد اینترنتی
    • آموزش طراحی سایت با المنتور
    • آموزش جامع وردپرس
    • آموزش فارسی سازی قالب وردپرس
    • آموزش HTML-CSS مقدماتی
    • آموزش ووکامرس مقدماتی
ورود / عضویت

وبلاگ

افق وب > بلاگ > مقالات آموزشی > برنامه نویسی > HTML-CSS > آموزش رایگان CSS- جلسه 9

آموزش رایگان CSS- جلسه 9

مرداد 3, 1400
HTML-CSS, برنامه نویسی

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

Padding در CSS

در بیان مفهوم Margin گفتیم که این ویژگی یک فاصله ی بیرونی برای عنصر ما تعریف می کند اما Padding یک فاصله ی درونی ایجاد می کند. برای درک بهتر نگاهی به تصویر زیر بیندازید. این تصویر به خوبی مفهوم Padding و Margins را برای شما نشان می دهد.

آموزش رایگان CSS- جلسه 9| Padding در CSS
آموزش رایگان CSS- جلسه 9| Padding در CSS

با استفاده از ویژگی padding می توانیم فاصله داخلی عناصر مورد نظر را در چهار جهت اصلی تعیین کنیم. در واقع میتوان برای ویژگی های زیر مقادیری مشخص کرد؛

  1.  padding-top
  2.  padding-right
  3.  padding-bottom
  4.  padding-left

ویژگی های بالا چه مقدارهایی میتوانند اختیار کنند؟

برای ویژگی های بالا می توان مقادیر عددی زیر را تعریف کرد؛

 

مقدار length ( مقدار عددی )

برای مقداردهی به این روش باید یکی از مقادیر rem و px و cm را در هر چهار جهت در نظر بگیریم.
مقدار % ( مقدار درصدی )

در این حالت کافی است عدد مورد نظر را با علامت درصد تعیین کنیم.

مقدار initial

اگر خاصیت padding را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت اعمال می شود.
مقدار inherit

و در آخر اگر این خصوصیت را برای عنصر خود در نظر بگیریم از مقدار تعیین شده برای والد خود پیروی می کند و همان مقدار را اعمال خواهد کرد.

 

مثال length

<style>
div
{
Padding-top: 20px ;
Padding-right:30px ;
Padding-bottom: 10px;
Padding-left:10px;
}
</style>

مثال درصد

<style>
div {padding: 30% 10% 25% 15%;}
div
{
Padding-top: 30%;
Padding-right: 10%;
Padding-bottom: 25%;
Padding-left: 15%;
}

</style>

مثال inherit

<style>
body{
padding-top:10px;
padding-right:20px;
padding-bottom:15px;
padding-left:10px;
}
h2#test{
border:2px solid black;
padding: inherit;
}
</style>

خلاصه نویسی ویژگی padding

خلاصه نویسی کدهای CSS هم باعث سرعت در کدنویسی می شود و هم خوانایی کدها را ساده تر می کند پس بهتر است نوشتن کدها را کوتاه کنیم.

padding: top right bottom left;

مقادیر ویژگی padding

padding ها میتوانند در چهار حالت مقدار عددی بگیرند که در ادامه مفهوم هر کدام را برای شما شرح خواهیم داد.

حالت اول

زمانی که padding ما چهار عدد دارد .مقادیر تعیین شده در جهت عقربه های ساعت اعمال میشوند. یعنی
اولین مقدار برای سمت بالا و آخرین مقدار برای سمت چپ خواهد بود.

padding: top right bottom left;

مثال؛

padding: 10px 20px 10px 0;

حالت دوم

حالت دوم برای زمانی است که سه مقدار وجود دارد که مقدار اول تعیین کننده ی بالا, مقدار دوم برای سمت راست و
چپ و مقدار سوم برای پایین می باشد؛

padding: top left/right bottom;
padding: 10px 10px 20px;

حالت سوم

در این حالت فقط دو مقدار وجود دارد که مقدار اول تعیین کننده ی جهت های بالا و پایین و مقدار دوم برای سمت راست و چپ است.

padding: top/bottom left/right;
padding: 10px 30px;

حالت چهارم

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

padding: top/bottom/left/right;
padding: 10px;

 

دوره ی آموزش html و css

 

چند مثال از padding

مثال 1

<style>
h4 {
background-color: lime;
padding: 20px 50px;
}
</style>

مثال 2

<style>
h3 {
background-color: cyan;
padding: 1em 50px 110px 110px;
}
</style>

مثال 3

<style>
div{
padding: 5%;
}
P{
padding:20px;
padding-left: inherit;
}
</style>

تگ p درون تگ div قرار دارد.

مثال 4

<style>
p{
padding: 10px;
padding-top: initial;
}
</style>

مثال 5

<style>
.test{
padding: 10px 3% 20px;
}
</style>

😊✌از بقیه ی جلسات آموزش CSS جا نمونید.✌😊

5/5 - (1 امتیاز)
برچسب ها: CssPadding در CSSآشنایی با cssآموزش رایگان CSS
درباره پروین رستمی

عضو تیم تحریریه افق وب

جدیدتر قالب خدماتی Chic Lifestyle ویژه آرایشگاه زنانه
قبلی قالب مجله خبری Magazine Newspaper

2 Comments

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • milad گفت:
    شهریور 10, 1400 در 4:59 ب.ظ

    سلام
    میشه همزمان به یک المان هم padding داد هم margin?

    پاسخ
    • حامد نجفی گفت:
      شهریور 14, 1400 در 11:15 ق.ظ

      بله میشه

      پاسخ

دیدگاهتان را بنویسید لغو پاسخ

تازه های آموزش
  • تقویم محتوا چیست؟ (جلسه 33)
  • استراتژی تولید محتوا (جلسه 32)
  • عادت‌ نویسندگان مشهور و سرشناس (جلسه 31)
  • راهنمای کامل تغذیه محتوا نویس (جلسه 30)
  • چگونه یک محتوای تصویری خوب بسازیم؟ (جلسه 29)
  • 10 تکنیک برای افزایش فالوور اینستاگرام (جلسه 28)
  • راه اندازی کمپین در شبکه های اجتماعی (جلسه 27)
  • آموزش 0 تا 100 ایمیل نویسی (جلسه 26)
آموزش رایگان ووکامرس
آموزش رایگان المنتور
آموزش رایگان html -css
درباره افق وب

ما در افق وب آرزو داریم هرکسی بتواند وبسایت خودش را مطابق سلیقه دلخواه خودش طراحی کند و در این مسیر تمامی آموزش های لازم را از پایه و با بالاترین کیفیت ممکن به صورت کاملا کاربری ارائه میدهیم

دسترسی بیشتر
  • قوانین و شرایط
  • ارتباط با ما
  • استخدام
  • تدریس خصوصی وردپرس
ارتباط با ما
  • تهران، رباط کریم، مجتمع اداری پردیسان
  • 02156434684
  • info@ofoghweb.com
تمامی حقوق برای افق وب محفوظ می باشد.
اشتراک گذاری در شبکه های اجتماعی
ارسال به ایمیل
https://ofoghweb.com/?p=13818
ورود به سیستم ×

ورود با کد یکبارمصرف
واتساپ
ارسال مجدد کد یکبار مصرف(00:30)
آیا حساب کاربری ندارید؟
نام‌نویسی

ارسال مجدد کد یکبار مصرف (00:30)
برگشت به صفحه ورود به سایت
  • (+98) جمهوری اسلامی ایران
مرورگر شما از HTML5 پشتیبانی نمی کند.