لاراولیستا زنگ CSS: جلسه نهم - padding - لاراول یستا

فرض کنید یک دیویژن رنگی دارید که در آن یک پاراگراف گذاشته‌اید! فاصله‌ای که بین پاراگراف (المان فرزند) و پدرش (المان دیویژین)‌ قرار می‌گیرد توسط padding مشخص می‌شود. در واقع از بردار المان تا محتوای داخلی آن فضای خالی وجود دارد که از آن به عنوان padding یاد می‌شود.

نکته: اگر مفهوم پدر فرزندی را به یاد نمی‌آورید یک مرور کوتاه برایتان می‌کنیم. همانطور که قبلا توضیح مختصری داده‌ایم، در اچ تی ام ال رابطه پدر فرزندی بین المان‌ها برقرار است. یعنی وقتی شما یک المان div می‌سازید، اگر این المان خالی باشد فرزندی ندارد. ولی شما می‌توانید در داخل این المان div یک پاراگراف، یک عکس، لینک یا هر چیز دیگری بنویسید. حتی می‌توانید چندین div در دل یکدیگر بنویسید و بدین ترتیب المان‌های شما دارای پدر، فرزند، نوه و نتیجه می‌شوند.

مثلا در زیر ما یک المان div داریم که پدر المان p و المان div دیگر (با آی دی pesar-1) است. بدین ترتیب المان p و div فرزندان المان div اول محسوب می‌شوند.

 

     

       

 

خب حالا که با مفهوم پدر فرزندی آشنا شدید، به مبحث پدینگ‌ها باز می‌گردیم. در واقع پدینگ‌ها فاصله بین دور المان (همان قاب المان) و محتوایی که داخل آن المان وجود دارد،‌ گفته می‌شود. مثلا اگر یک المان را به صورت یک جعبه در نظر بگیریم که داخل این جعبه یک شیء قرار دارد، فاصله بین شیء از بالا و پایین و چپ و راست جعبه را پدینگ مشخص می‌کند. به نوعی می‌توان پدینگ را همان حجم المان دانست.

نام: padding

این دستور چه کاری انجام می‌دهد؟‌ با کمک این دستور می‌توانیم حاشیه‌ و فاصله‌ای را بین بیرونی‌ترین بخش هر المان و المان‌هایی که داخلش قرار دارند برقرار کنیم. این فاصله می‌تواند از سمت دلخواه چپ، راست، بالا و پایین باشد. 

چه چیزهایی را در مقابلش بنویسیم؟ در مقابل پدینگ فاصله مورد نظر را بر حسب پیکسل یادداشت می‌کنیم. 

نمونه‌ی نوشتن این دستور: padding : 100px یا padding-right یا padding-left یا padding-top یا padding-bottom 

ایجاد فاصله بین حاشیه المان و المان‌های داخلش کار سختی نیست؛ ولی چند مورد مخصوص دارد که در اینجا برایتان شرح داده‌ایم تا راحت‌تر از آن استفاده کنید.

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

همانطور که در مثال زیر می‌بینید ما به المان box که دور تا دور المان پاراگراف قرار گرفته است پدینگ ۱۰۰ پیکسلی داده‌ایم. چون کلمه پدینگ را به تنهایی و به اصطلاح خودمانی،ِ خشک و خالی نوشته‌ایم: این فاصله به صورت مساوی بین حاشیه‌ی هر چهار وجه داخلی box اعمال می‌شود. 

HTML

 

 پدینگ باعث فاصله بین المان پدر و پسر می‌شود.

CSS

p.element {

color: red;

}

div.box {

padding: 100px;

background-color: orange;

}

پدینگ باعث فاصله بین المان پدر و پسر می‌شود

 

حالت دوم: شاید بخواهیم سمت چپ را فاصله بیشتری بدهیم! شاید هم سمت راست را یا شاید بالا یا پایین! در این حالت سی اس اس این امکان را در اختیارمان می‌گذارد که به هر جهت از المان یک پدینگ بدهیم. مثلا به سمت چپ پدینگ ۱۰ پیکسلی، به راست ۳۰ پیکسل و به بالا و پایین هم ۲۰ پیکسل! 

 این موضوع را در مثال زیر بیشتر شرح داده‌ایم. به نحوه‌ی نوشتن پدینگ و تفاوت آن با مثال قبلی که به صورت تنها نوشته می‌شد، دقت کنید. 

HTML

 

 پدینگ باعث فاصله بین المان پدر و پسر می‌شود.

CSS

p.element {

color: red;

}

div.box {

padding-top: 20px;

padding-right: 30px;

padding-bottom: 20px;

padding-left: 10px;

background-color: orange;

}

پدینگ باعث فاصله بین المان پدر و پسر می‌شود

 

البته لازم به ذکر است که شما می‌توانید تنها در یکی از جهت‌ها پدینگ بدهید و مجبور نیستید که همیشه تمامی این مقادیر را بنویسید. 

حالت سوم: خب شاید برای شروع برای شما نوشتن چهار دستور برای ایجاد پدینگ‌های غیر مساوی در سمت چپ، راست، بالا و پایین چندان مشکل نباشد؛ ولی به مرور زمان این موضوع کند و آزار دهنده می‌شود. چرا که کمتر نوشتن و داشتن سرعت عمل حرف اول را می‌زند. به همین خاطر شما می‌توانید نسخه‌ی خلاصه شده این دستور را نیز به کار ببرید. اعداد در این روش به ترتیب از سمت چپ، نمایانگر فاصله نسبت به المان داخلی از سمت بالا، فاصله نسبت به المان داخلی از سمت راست، فاصله نسبت به المان داخلی از سمت پایین،  فاصله نسبت به المان داخلی  از سمت چپ (به صورت ساعتگرد می‌چرخد) است: 

{
    padding: ۲۵px 50px 20px 50px;
}

نکته: اگر هر یک از فاصله‌ها را ننویسید یا عدد صفر بنویسید، پدینگ در آن ناحیه صفرخواهد بود.

 

به این پست امتیاز دهید.
بازدید : 223 views بار دسته بندی : مجله برنامه نویس تاريخ : 2 جولای 2021 به اشتراک بگذارید :
دیدگاه کاربران
    • دیدگاه ارسال شده توسط شما ، پس از تایید توسط مدیران سایت منتشر خواهد شد.
    • دیدگاهی که به غیر از زبان فارسی یا غیر مرتبط با مطلب باشد منتشر نخواهد شد.

برچسب ها