آمورش ویژگی padding در CSS
آمورش ویژگی padding در CSS
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آمورش ویژگی padding در CSS خواهیم پرداخت.
ویژگی padding به شما اجازه می دهد تا مشخص کنید که چه مقدار فضای لازم بین محتوای یک عنصر و مرز آن ظاهر شود –
مقدار این ویژگی باید یک طول، یک درصد یا کلمه ارث باشد. اگر مقدار ارثی باشد، همان padding عنصر اصلی آن خواهد بود. اگر از درصدی استفاده شود، درصد مربوط به جعبه حاوی است.
از ویژگی های CSS زیر می توان برای کنترل لیست ها استفاده کرد. همچنین می توانید با استفاده از مشخصات زیر مقادیر مختلفی را برای padding در هر طرف جعبه تنظیم کنید –
- Padding-bottom پایین یک عنصر را مشخص می کند.
- Padding-top بالای یک عنصر را مشخص می کند.
- Padding-left سمت چپ یک عنصر را مشخص می کند.
- Padding-right مناسب یک عنصر را مشخص می کند.
padding به عنوان مختصر نویسی برای خصوصیات قبلی عمل می کند.
اکنون، نحوه استفاده از این خصوصیات را با مثال خواهیم دید.
ویژگی padding-bottom
ویژگی padding-bottom پایین (فاصله) یک عنصر را تنظیم می کند. این می تواند از نظر طول٪ یک مقدار را بدست آورد.
در اینجا یک مثال آورده شده است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> </head> <body> <p style = "padding-bottom: 15px; border:1px solid black;"> This is a paragraph with a specified bottom padding </p> <p style = "padding-bottom: 5%; border:1px solid black;"> This is another paragraph with a specified bottom padding in percent </p> </body> </html> |
خروجی به صورت زیر می باشد:
|
1 2 3 |
This is a paragraph with a specified bottom padding This is another paragraph with a specified bottom padding in percent |
ویژگی padding-top
ویژگی padding-top (فضای) بالای یک عنصر را تنظیم می کند. این می تواند از نظر طول٪ یک مقدار را بدست آورد.
در اینجا یک مثال آورده شده است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Live Demo <html> <head> </head> <body> <p style = "padding-top: 15px; border:1px solid black;"> This is a paragraph with a specified top padding </p> <p style = "padding-top: 5%; border:1px solid black;"> This is another paragraph with a specified top padding in percent </p> </body> </html> |
خروجی به صورت زیر می باشد:
|
1 2 3 |
This is a paragraph with a specified top padding This is another paragraph with a specified top padding in percent |
ویژگی padding-left
ویژگی padding-left سمت چپ (فاصله) یک عنصر را تنظیم می کند. این می تواند از نظر طول٪ یک مقدار را بدست آورد.
در اینجا یک مثال آورده شده است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Live Demo <html> <head> </head> <body> <p style = "padding-left: 15px; border:1px solid black;"> This is a paragraph with a specified left padding </p> <p style = "padding-left: 15%; border:1px solid black;"> This is another paragraph with a specified left padding in percent </p> </body> </html> |
خروجی به صورت زیر می باشد:
|
1 2 3 |
This is a paragraph with a specified left padding This is another paragraph with a specified left padding in percent |
ویژگی padding-right
ویژگی padding-right (فضای) مناسب یک عنصر را تنظیم می کند. این می تواند از نظر طول٪ یک مقدار را به خود اختصاص دهد.
به عنوان مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> </head> <body> <p style = "padding-right: 15px; border:1px solid black;"> This is a paragraph with a specified right padding </p> <p style = "padding-right: 5%; border:1px solid black;"> This is another paragraph with a specified right padding in percent </p> </body> </html> |
خروجی به صورت زیر می باشد:
|
1 2 3 |
This is a paragraph with a specified right padding This is another paragraph with a specified right padding in percent |
ویژگی padding
ویژگی padding فضای چپ، راست، بالا و پایین یک عنصر را تنظیم می کند. این می تواند از نظر طول٪ یک مقدار را به خود اختصاص دهد.
در اینجا یک مثال آورده شده است –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
Live Demo <html> <head> </head> <body> <p style = "padding: 15px; border:1px solid black;"> all four padding will be 15px </p> <p style = "padding:10px 2%; border:1px solid black;"> top and bottom padding will be 10px, left and right padding will be 2% of the total width of the document. </p> <p style = "padding: 10px 2% 10px; border:1px solid black;"> top padding will be 10px, left and right padding will be 2% of the total width of the document, bottom padding will be 10px </p> <p style = "padding: 10px 2% 10px 10px; border:1px solid black;"> top padding will be 10px, right padding will be 2% of the total width of the document, bottom padding and top padding will be 10px </p> </body> </html> |
خروجی به صورت زیر می باشد:
|
1 2 3 4 5 6 7 |
all four padding will be 15px top and bottom padding will be 10px, left and right padding will be 2% of the total width of the document. top padding will be 10px, left and right padding will be 2% of the total width of the document, bottom padding will be 10px top padding will be 10px, right padding will be 2% of the total width of the document, bottom padding and top padding will be 10px |
لیست جلسات قبل آموزش CSS
- آموزش CSS
- CSS چیست؟
- آموزش نحو CSS
- آموزش قوانین CSS
- آموزش واحد انداره گیری در CSS
- آموزش رنگ ها در CSS
- آموزش Background در CSS
- آموزش فونت ها در CSS
- آموزش استفاده از تصاویر در CSS
- آموزش استفاده از تصاویر در CSS
- آموزش استفاده از لینک ها در CSS
- آموزش جداول در CSS
- آموزش حاشیه در CSS
- آموزش margin در CSS
- آموزش لیست ها در CSS
.svg)
دیدگاه شما