استفاده از padding در تنظیم حاشیه

اگر به عناوین موجود در سایت و حاشیه‌هایی که پیش‌تر به مرور آن‌ها پرداختیم نگاه کنید متوجه می‌شوید که متون قرار داده شده دقیقا در کنار حاشیه‌ها جای گرفته‌اند؛ اندکی آزاردهنده به نظر می‌رسد، اینطور نیست؟ برای حل این مشکل از لایه‌گذاری یا padding بین متن و حاشیه استفاده می‌کنیم.

سه روش متفاوت برای اعمال این لایه‌ها بر روی تگ‌های block-level را با یکدیگر مرور می‌کنیم؛ این کار را با استفاده از تعریف متغییرهای pixel، ems و درصد انجام می‌دهیم.

.pixelpadding {

padding: 30px;

border: 1px dashed gray;

}

.empadding {

padding: 2em;

border: 1px dashed gray;

}

.percentagepadding {

padding: 5%;

border: 1px dashed gray;

}

در عکس 4.21 نتیجه کار انجام شده را بر روی CSS مشاهده می‌کنیم.

تنظیم حاشیه با استفاده از padding

عکس 4.21: سه روش استفاده شده به نتایج یکسان منتهی شدند.

کدام متغییر از بقیه بهتر است؟

کدام یک از روش‌های تعیین اندازه برای طراحی لایه‌ها مناسب‌تر است؟ pixel، ems یا درصد؟ اگر هرسه این‌ها یک نتیجه را دربر دارند چه فرقی می‌کند از کدام‌ یک استفاده کنیم؟ جواب از این قرار است که بستگی به انتظارات شما از نحوه عملکرد طراحی‌ها دارد.

اگر در نظر دارید با تغییر اندازه پنجره مرورگر کار نیز به همان میزان تغییر کند استفاده از درصد بهترین گزینه شما است.

هر مقداری که برای این متغییر انتخاب کنید بستگی مستقیمی به اندازه صفحه مرورگر کاربر سایت شما دارد؛ به این ترتیب که با بزرگتر شدن صفحه مرورگر لایه‌های شما نیز به همان نسبت بزرگ می‌شوند، و البته بالعکس.

اگر می‌خواهید طراحی شما با اندازه‌های مختلف فونت هماهنگی و هم‌خوانی داشته باشد و البته درون IE6 کار شما به خوبی نشان داده شود باید از ems استفاده کنید، از آن‌جایی که متغییر شما با شخصی سازی اندازه فونت درون مرورگر کاربر منطبق خواهد شد. اگر از pixel یا point استفاده کنید مرورگر فارغ از اندازه‌ای که برای فونت‌ها در نظر گرفته باشید با زوم کردن کاربر اندازه‌ها را تغییر خواهد داد، تنها IE6 این داستان را نادیده می‌گیرد.

اگر به دنبال طراحی دقیق و استفاده از المان‌های گرافیکی در کارتان هستید، المان‌هایی که باید حتما در جای مقرر قرار بگیرند، فارغ از اندازه و تنظیمات صفحه مرورگر، بهترین گزینه برای شما pixel است. یک pixel دقیقا یکی از نقطه‌های صفحه نمایش کاربر را هدف قرار می‌دهد و از دو گزینه دیگر دقیق‌تر است.

توجه داشته باشید که زوم کردن صفحه نمایش با سایزبندی مجدد فونت‌ها تفاوت دارد و این‌ها دو چیز مجزا هستند. زوم کردن صفحه نمایش تمامی آن‌چه در محتوا موجود است از جمله متن، تصاویر و ... را هدف قرار می‌دهد، این در حالی است که تغییر سایز متون تنها بر روی متن کار اثر دارد. در ادامه فصل به این مبحث بیشتر خواهیم پرداخت.