خصوصیت padding Style
- صفحه قبل overflowY
- صفحه بعدی paddingBottom
- برگشت به لایه بالاتر اجزای Style HTML DOM
تعریف و کاربرد
padding ویژگی‌ای است که فضای درونی عنصر را تنظیم یا بازمی‌گرداند.
این ویژگی می‌تواند یک تا چهار مقدار را بپذیرد:
ویژگی margin و ویژگی padding در اطراف عنصر فضای اضافه می‌کنند. اما تفاوت این است که، margin فضای اضافه را در اطراف لبه‌ها قرار می‌دهد، در حالی که padding فضای اضافه را در داخل لبه‌های عنصر قرار می‌دهد.
- یک مقدار، به عنوان مثال: div {padding: 50px} - تمام چهار لبه دارای فضای درونی 50px خواهند بود
- دو مقدار، به عنوان مثال: div {padding: 50px 10px} - فضای درونی بالا و پایین 50px و فضای درونی چپ و راست 10px خواهد بود
- سه مقدار، به عنوان مثال: div {padding: 50px 10px 20px} - حاشیه داخلی بالا 50px، حاشیه داخلی چپ و راست 10px، حاشیه داخلی پایین 20px
- چهار مقدار، به عنوان مثال: div {padding: 50px 10px 20px 30px} - حاشیه داخلی بالا 50px، حاشیه داخلی راست 10px، حاشیه داخلی پایین 20px، حاشیه داخلی چپ 30px
لطفاً به
آموزش CSS:پادکسی CSS
دستورالعمل CSS:ویژگی padding
مثال
مثال 1
تنظیم حاشیه داخلی عناصر <div>:
document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";
مثال 2
تمام حاشیه‌های داخلی چهار گوشه عناصر <div> را به "25px" تغییر دهید:
document.getElementById("myDiv").style.padding = "25px";
مثال 3
بازگشتی از حاشیه داخلی عناصر <div>:
alert(document.getElementById("myDiv").style.padding);
مثال 4
تفاوت بین ویژگی margin و padding:
function changeMargin() {
document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
document.getElementById("myDiv2").style.padding = "100px";
}
نحوه نوشتن
بازگشتی از ویژگی padding:
object.style.padding
تنظیم ویژگی padding:
object.style.padding = "%|length|initial|inherit"
مقدار ویژگی
| مقدار | توضیحات |
|---|---|
| % | با استفاده از درصد از عرض عنصر والد تعریف می‌شود. |
| length | با استفاده از واحد‌های طول تعریف می‌شود. |
| initial | این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به initial. |
| inherit | این ویژگی را از عنصر والد خود ارث می‌برد. لطفاً به inherit. |
جزئیات فنی
| مقدار پیش‌فرض: | 0 |
|---|---|
| مقدار بازگشتی: | رشته‌ای که نشان‌دهنده حاشیه داخلی عناصر است. |
| نسخه CSS: | CSS1 |
پشتیبانی از مرورگر
| کروم | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| کروم | Edge | Firefox | Safari | Opera |
| پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی |
- صفحه قبل overflowY
- صفحه بعدی paddingBottom
- برگشت به لایه بالاتر اجزای Style HTML DOM
