آموزش CSS

آموزش CSS - حاشیه داخلی با Padding

Padding ناحیه ای بین محتوای المان و حاشیه آن است. این دستور به ما امکان کنترل فاصله اشیا داخل کارد با حاشیه ها را می دهد.

خصوصیت Padding:

این خصوصیت به شما اجازه می دهد ناحیه Padding را برای یک المان تعریف کنید. این ناحیه حاشیه المان را از محتوای آن جدا می سازد. معمولا Padding تحت تاثیر خصوصیت background-color قرار می گیرد.

تعریف Padding برای هر طرف:

شما می توانید به سادگی Padding را برای اطراف یک المان همچون بالا، پایین، راست، چپ مشخص کنید. برای اینکار باید از خصوصیت Padding کمک بگیرید.

h1 {
    padding-bottom: 10px;
}
p {
    padding-top: 20px;
    padding-left: 50px;
}

خصوصیت مختصر نویسی Padding:

خصوصیت Padding یک خصوصیت مختصر نویسی است که از تنظیم جداگانه این مقدار برای هر سمت از المان جلوگیری می کند.

h1 {
    padding: 10px 20px;
}
p {
    padding: 10px 15px 20px 25px;
}

نکته: بر خلاف خصوصیت Margin، مقادیری که برای خصوصیت padding به کار می رود نمی تواند منفی باشد.

خصوصیت padding می تواند یک، دو، سه یا چهار مقدار زیر را اتخاذ نماید.

  • اگر مقدار موردنظر بر روی یک تنظیم شود، در کل اطراف المان اعمال می گردد.
  • اگر بر روی دو تنظیم شود؛ مقدار اول بر روی طرف بالا و پایین و مقدار دوم بر روی سمت راست و چپ اعمال می گردد.
  • اگر سه عدد تنظیم شود؛ مقدار اول بر روی سمت بالا، مقدار دوم به سمت راست و چپ اعمال می شود. عدد آخر بر روی سمت پایین المان اعمال خواهد شد.
  • اگر چهار مقدار مشخص شود، این چهار عدد بر روی بالا، راست، پایین و چپ به ترتیب مشخص شده اعمال می شود.
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...