cssblog.ir logo
P

padding

فاصله محتوا با خط حاشیه

مشخصه padding میزان فاصله بین محتوای عنصر و خط حاشیه (border) را تعیین می‌کند و می توان به روشهای مختلفی آن را مقداردهی نمود

در CSS به درونی‌ترین قسمت عناصرpadding (بخوانید پَدینگ) گفته می شود. این فضا اولین قسمت از «مدل جعبه - box model» است که در کنار محتوای عنصر قرار دارد. تصویر زیر این فضا را نمایش می‌دهد:

CSS Box Model

این مشخصه را می توان با استفاده از مقادیر مثبت و با واحدهای مجاز طول یا درصدها مقداردهی کرد. مقدار پیشفرض این مشخصه معمولا صفر (۰) است.

با استفاده از مشخصه paddingمی توان تعیین نمود که در ۴ جهت بالا، راست، پایین، چپ چه میزان فضا (قبل از border - یعنی از داخل) وجود داشته باشد. مانند:

.container {
	padding: 0 15px;
}

استایل فوق را می توان به شکل زیر نیز نوشت (توصیه نمی شود):

.container {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 15px;
	padding-right: 15px;
}

مشخصه padding نیز مانند margin جزو مشخصه های shorthand (ترکیب کننده چند زیر مشخصه) می باشد و با استفاده از آن می توانیم برای ۴ جهت بصورت یکجاpadding تعیین کنیم. این زیرمشخصه ها به ترتیب برای بالا (padding-top)، راست (padding-right)، پایین (padding-bottom) و چپ (padding-left) هستند.

حالت های دیگر مقداردهی

حالت های دیگری جز ۴ مقدار نیز وجود دارند که دقیقا مانند آنچه که درباره margin ها وجود دارد، عمل می کنند.

یک مقدار: اگر یک مقدار وارد شود تمام جهت دارای این میزان padding خواهند بود.

button {
	/*
	padding-top: 20px
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	*/
	padding: 20px;
}

دو مقدار: اگر دو مقدار وارد شود، مقدار اول برای بالا و پایین و مقدار بعدی برای سمت چپ و راست اعمال خواهد شد.

button {
	/*
	padding-top: 20px
	padding-right: 40px;
	padding-bottom: 20px;
	padding-left: 40px;
	*/
	padding: 20px 40px;
}

سه مقدار: در این حالت مقدار اول برای بالا، مقدار دوم برای سمت راست و چپ و مقدار سوم برای سمت پایین  اعمال خواهد شد.

button {
	/*
	padding-top: 20px
	padding-right: 50px;
	padding-bottom: 10px;
	padding-left: 50px;
	*/
	padding: 20px 50px 10px;
}

ارتباط padding و عرض و ارتفاع

همانطور که در ابتدا نیز اشاره شد، این مشخصه جزء مشخصه های تاثیر گذار در محاسبه «جعبه یا همان box» می باشد پس مقداری که برای padding تعیین می شود در عرض و ارتفاع عناصر تاثیر خواهد گذاشت.

مثال: در مثال زیر عرض عنصر ۲۰۰ پیکسل تعیین شده است اما بدلیل ۲۰ پیکسل padding سمت چپ و راست، عرضی که در نهایت این عنصر می گیرد برابر ۲۴۰ پیکسل خواهد بود. ملاک تشخیص ۲۴۰ پیکسل بودن نیز، عنصری است که مانند خط‌کش در بالای جعبه قرار گرفته است.  

 

مسلما این رفتاری نیست که در تمام مواقع مطلوب باشد. برای اینکه مرورگر را مجبور کنیم که در هنگام محاسبه عرض یا ارتفاع padding را به آن اضافه نکند، باید از مشخصه border-box استفاده کنیم. مانند:

div {
	box-sizing: border-box;
}

در چنین حالتی با هر چقدر که میزان padding افزایش پیدا کند تاثیری در عرض تعیین شده نخواهد گذاشت و فقط باعث کمتر شدن جا برای محتوا خواهد شد. مانند:

همانطور که در مثال فوق مشاهده می کنید با افزایش padding تغییری در سایز آن مشاهده نمی شود.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

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

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند