آموزش برنامه نویسی و مجله تخصصی فناوری
آموزش CSS - حاشیه از داخل(padding)
حاشیه‌ها در سی اس اس (CSS) به صورت یک ویژگی با نام "padding" استفاده می‌شوند تا فضای میان محتوا و حاشیه یک عنصر HTML را تنظیم کنند.
Padding در CSS، یک ویژگی است که برای تعیین فاصله و فضای میان محتوا و مرزهای یک عنصر HTML استفاده می‌شود. این مقدار از حاشیه داخلی عنصر است که به عنوان یک پوشش فضایی بین محتوا و حاشیه‌های خارجی آن عمل می‌کند، که به طراحان وب اجازه می‌دهد تا ظاهر و تنظیمات فاصله‌ای بین عناصر را کنترل کنند.
این ویژگی می‌تواند به صورت طول (پیکسل یا اینچ)، درصد یا با استفاده از کلمه کلیدی "inherit" تعیین شود.
اگر مقدار padding به صورت طول باشد، مثل "10px" یا "2em"، به عنوان یک اندازه ثابت تعیین می‌شود. اگر از درصد استفاده شود، این مقدار به عنوان درصدی از عرض جعبه حاوی محتوا محاسبه می‌شود.
استفاده از کلمه "inherit" به عنوان مقدار padding، به این معنی است که padding از ویژگی مشابه در والدین مورد نظر ارث بری شود. این امکان به طراحان وب این قابلیت را می‌دهد که از تنظیمات حاشیه ویژگی‌های والدین استفاده کنند و موقعیت‌های مشابه را در صفحه وب خود داشته باشند.
مهمترین نکته این است که مقدار padding نمی‌تواند منفی باشد، یعنی امکان تعیین فاصله منفی از محتوا به مرزهای عنصر وجود ندارد.
یک مثال ساده رابررسی کنیم که با استفاده از یک مقدار طولی تنها برای هر چهار طرفpadding ، به صورت یکسان اعمال می‌شود. در اینجا ما 5 پیکسل padding به عنصر h2 اضافه می‌کنیم:
<html>
<head>
<style>
div{
border: 1px solid #aaa;
}
h2{
padding: 5px; background-color: #eee;
}
</style>
</head>
<body>
<div>
<h2>The padding can be seen around the text.</h2>
</div>
</body>
</html>
می‌توانید از هر واحد برای تنظیم padding استفاده کنید، ساختار هایی مانند پیکسل، اینچ، میلیمتر یا ems. مقدار پیش‌فرض برای padding 0 (صفر) است، بنابراین اگر مقداری برای padding تعیین نکنید، هیچ paddingی دور عنصر نمایان نخواهد شد. برای تنظیم یک padding به اندازه یک چهارم اینچ دور عنصر h2، کد بالا به صورت زیر نوشته می‌شود:
<html>
<head>
<style>
div{
border: 1px solid #aaa;
}
h2{
padding: 0.25in; background-color: #eee;
}
</style>
</head>
<body>
<div>
<h2>A 0.25 inch padding can be seen around the text.</h2>
</div>
</body>
</html>
استفاده از ویژگی padding درمقابل حالت بدون استفاده از padding :
استفاده از ویژگی padding در CSS به طراحان وب این امکان را می‌دهد تا فاصله حاشیه داخلی یک عنصر HTML را به دلخواه تنظیم کنند و فضای میان محتوا و مرزها را کنترل نمایند. در مقابل، در حالت بدون استفاده از padding، فاصله حاشیه داخلی به طور پیش‌فرض توسط مرورگر مشخص می‌شود و امکان تعیین دقیق آن توسط طراح وب وجود ندارد.
مثال زیر را در نظر بگیرید که در آن عنصر اول h2 دارای یک padding است در حالی که عنصر بعدی h2 هیچ paddingی ندارد. با دیدن خروجی آن، تفاوت را بررسی کنید:
<html>
<head>
<style>
div{
border: 1px solid #aaa;
}
h2.a{
padding: 10px; background-color: #eee;
}
h2.b{
background-color: #eee;
}
</style>
</head>
<body>
<div>
<h2 class="a">The padding can be seen around this text.</h2>
<h2 class="b">There is no padding around this text.</h2>
</div>
</body>
</html>
خاصیت های padding :
padding: فاصله محتوا از تمام مرز های عنصر (shorthand property)
padding-left: فاصله محتوا از مرز سمت چپ
padding-right: فاصله محتوا از مرز سمت راست
padding-bottom: فاصله محتوا از مرز سمت پایین
padding-top: فاصله محتوا از مرز سمت بالا
مثال زیر نشان می‌دهد چگونه می‌توان ویژگی‌های padding مختلف را دور یک عنصر h2 تنظیم کرد:
<html>
<head>
<style>
div{
border:1px solid #aaa
}
h2 {
padding-top: 20px; padding-right:40px;
padding-bottom:10px; padding-left:0px;
background-color: #eee;
}
</style>
</head>
<body>
<div>
<h2>This h2 element has different paddings around it!</h2>
</div>
</body>
</html>
ویژگی مختصر نویسی در padding :
سی اس اس اجازه می‌دهد تا همه paddingها را با استفاده از یک عبارت منظم به ترتیب بنویسید.
h2 {padding: top right bottom left}
مقدار ویژگی‌های padding می‌تواند به پیکسل، اینچ، ems یا سانتیمتر باشد، به جز درصد. بنابراین با استفاده از دستورات بالا می‌توانیم کد اچ‌تی‌ام‌ال قبلی خود را به صورت زیر بنویسیم:
<html>
<head>
<style>
div{
border:1px solid #aaa
}
h2 {
padding: 20px 40px 10px 0px;
background-color: #eee;
}
</style>
</head>
<body>
<div>
<h2>This h2 element has different paddings around it!</h2>
</div>
</body>
</html>
تنظیم سه مقدار در padding :
می‌توان سه مقدار را به padding انتقال داد همانند padding: 20px 40px 10px. در این صورت، padding بالا 20 پیکسل، padding راست و چپ 40 پیکسل و padding پایین 10 پیکسل خواهد بود.
<html>
<head>
<style>
h2 {
padding: 20px 40px 10px; background-color: #eee;
}
</style>
</head>
<body>
<div>
<h2>This h2 element has different paddings around it!</h2>
</div>
</body>
</html>
تنظیم دو مقدار در padding :
می‌توان دو مقدار را به padding انتقال داد همانند padding: 20px 40px. در این صورت، padding بالا و پایین 20 پیکسل، padding راست و چپ 40 پیکسل خواهد بود.
<html>
<head>
<style>
h2 {
padding: 20px 40px; background-color: #eee;
}
</style>
</head>
<body>
<div>
<h2>This h2 element has different paddings around it!</h2>
</div>
</body>
</html>
ما پیش‌تر یک مثال برای انتقال یک مقدار به عنوان padding دیده‌ایم که برای همه‌ی اطراف یعنی بالا، راست، پایین و چپ به صورت یکسان اعمال می‌شود
ترکیب واحدها در padding :
سی اس اس هنگام مشخص کردن، ویژگی مختصر ،محدودیتی در استفاده از واحدهای مختلف برای مقادیر padding ندارد، این بدان معناست که می‌توانید مقادیر طولی را به عنوان پیکسل همراه با ems یا اینچ و ...استفاده کنید.
<html>
<head>
<style>
h2 {
padding: 20px 5in 3em 4ex; background-color: #eee;
}
</style>
</head>
<body>
<div>
<h2>This h2 element has different paddings around it!</h2>
</div>
</body>
</html>
سی اس اس به هیچ عنوان اجازه مقدار منفی برای هر دو ویژگی padding را نمی‌دهد، در حالی که مقادیر منفی حاشیه را می‌توانید برای ویژگی‌های حاشیه سی اس اس تنظیم کنید.
استفاده ازدرصددرpadding:
ویژگی padding در سی اس اس می‌تواند مقدار درصدی داشته باشد. درصد‌ها به نسبت عرض ناحیه محتوای والدین محاسبه می‌شوند. به عنوان مثال، اگر عرض والدین 500 پیکسل باشد و ما برای عنصر فرزندی آن 10% padding تنظیم کنیم، سی اس اس 10% padding را از 500 پیکسل محاسبه خواهد کرد، یعنی 50 پیکسل padding برای عنصر فرزند.
<html>
<head>
<style>
div {
width: 500px; border:1px solid #aaa;
}
h2 {
padding: 10%; background-color: #eee;
}
</style>
</head>
<body>
<div>
<h2>H2 element with some paddings around it!</h2>
</div>
</body>
</html>
ما همچنین می‌توانیم مقادیر درصدی را با واحدهای طول دیگر برای padding ترکیب کنیم، با این حال معنای padding درصدی همانند توضیحات بالا باقی می‌ماند:
<html>
<head>
<style>
div {
width: 500px; border:1px solid #aaa;
}
h2 {
padding-top: 0.5in; padding-bottom: 10%; background-color: #eee;
}
</style>
</head>
<body>
<div>
<h2>H2 element with some paddings around it!</h2>
</div>
</body>
</html>