آموزش CSS – آشنایی با padding در سی اس اس (CSS) (جلسه ۲۰)

پس از آشنایی با مفهوم Box Model در این ماژول قصد داریم تا با padding به صورت کامل آشنا شویم. به طور کلی منظور از padding فضایی است که مابین محتوای تگ های اچ تی ام ال (HTML) و لبه یا همان Border قرار می گیرد:

padding_in_css

برای اختصاص padding به تگ های اچ تی ام ال (HTML) روش های گوناگونی پیش رو داریم: ابتدا می توانیم به صورت مجزا با استفاده از دستورات padding-top، padding-right، padding-bottom و padding-left برای سمت بالا، راست، پایین و چپ تگ ها مقداری را در نظر بگیریم. برای روش شدن این موضوع کدهای زیر را وارد ویرایشگر متن مد نظر می کنیم:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>asrefonon</title>
    <link type="text/css" rel="stylesheet" href="/css/main.css">
</head>
<body>
    <p>This is padding</p>
</body>
</html>

همانطور که می بینیم، داخل تگ <body> یک تگ <p> حاوی عبارت This is padding ایجاد کرده ایم. حال داخل فایل سی اس اس (CSS) کدهای زیر را برای تغییر padding وارد می کنیم:

p{
   background-color:red;
   color:white;
   padding-top:30px;
   padding-right:30px;
   padding-bottom:30px;
   padding-left:30px;
}

همانطور که در کد فوق ملاحظه می شود، ابتدا رنگ پس زمینه تگ پاراگراف را به رنگ قرمز تغییر داده تا تغییرات padding قابل مشاهده باشند سپس رنگ متن را به رنگ سفید تغییر داده ایم و در نهایت با استفاده از Property هایی که پیش از این با آن ها آشنا شدیم مقدار ۳۰ پیکسل را برای هر چهار جهت تگ در نظر می گیریم:

css_padding

همانطور که در تصویر فوق مشخص است، محتوای داخل تگ از هر چهار سمت به میزان ۳۰ پیکسل فاصله گرفته است (در واقع از آنجا که مقداری برای width در نظر نگرفته ایم، این تگ از سمت راست به انتهای صفحه امتداد پیدا کرده است).
کدهای سی اس اسی که در بالا دیدیم را به صورت خلاصه به روش زیر می توان نوشت:

p {
   background-color:red;
   color:white;
   padding: 30px 30px 30px 30px;
}

همانطور که در کد فوق می بینیم، دستور padding را در نظر گرفته و ابتدا مقدار مرتبط با سمت بالا را نوشته یک فاصله قرار می دهیم سپس مقدار مرتبط با سمت راست را نوشته و مجدد یک فاصله قرار می دهیم و سپس به ترتیب مقادیر مرتبط با سمت پایین و سمت چپ را می نویسیم (به عبارت دیگر ترتیب قرارگیری این اعداد همچون جهت چرخیدن عقربه های ساعت می باشد).
حال برای padding سه مقدار را در نظر می گیریم:

p {
   background-color:red;
   color:white;
   padding: 30px 30px 30px;
}

در این صورت مقدار اول برای سمت بالا بوده، مقدار دوم برای سمت های راست و چپ بوده و مقدار سوم هم برای سمت پایین اختصاص داده خواهد شد. حال اگر برای این Property فقط دو مقدار را به صورت زیر در نظر بگیریم در این صورت مقدار یا Value اول به سمت های بالا و پایین اختصاص داده می شود و Value دوم هم به سمت های راست و چپ اختصاص می یابد. در نهایت اگر فقط برای padding یک Value در نظر بگیریم، این مقدار برای هر چهار جهت اختصاص خواهد یافت:

p {
   background-color:red;
   color:white;
   padding: 30px 30px;
}

لازم به ذکر است زمانیکه برای یک تگ اچ تی ام ال (HTML) هیچ گونه padding یی در نظر نگیریم، به صورت پیش فرض Value مرتبط با padding صفر خواهد بود.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

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

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان