جلسه نهمpadding-css

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

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

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

 <div id="1">

      <div id="pesar-1-"> <!-- این المان پسر المان ۱ و پدر متن پایینی است-->

       <p id="nave-1">این المان نوه دیویژن اول و پسر المان pesar-1   است.</p>

  </div>

</div>

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

نام: padding

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

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

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

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

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

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

HTML

<div class="box"> 

<p  class=" element">  پدینگ باعث فاصله بین المان پدر و پسر می‌شود.</p>

</div>

CSS

p.element {

color: red;

}

div.box {

padding: 100px;

background-color: orange;

}

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

 

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

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

HTML

<div class="box"> 

<p  class=" element">  پدینگ باعث فاصله بین المان پدر و پسر می‌شود.</p>

</div>

CSS

p.element {

color: red;

}

div.box {

padding-top: 20px;

padding-right: 30px;

padding-bottom: 20px;

padding-left: 10px;

background-color: orange;

}

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

 

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

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

p {
    padding: 25px 50px 20px 50px;
}

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