وقتی صحبت از طراحی وب و زیبایی ظاهری صفحات می‌شود، تعیین فاصله بین عناصر یکی از مهم‌ترین کارهاست. حاشیه‌ها در CSS یکی از ابزارهایی هستند که به طراحان کمک می‌کنند فاصله بین عناصر مختلف را به راحتی مدیریت کنند. به طور خلاصه، حاشیه بیرونی‌ترین فضای اطراف عنصر است که به راحتی قابل کنترل است.
حاشیه‌ها می‌توانند به صورت فردی برای هر سمت (بالا، راست، پایین و چپ) یا به صورت کلی برای تمام جهات تعیین شوند. برای مثال اگر بخواهید یک فاصله یکنواخت در اطراف یک عنصر داشته باشید، می‌توانید از ویژگی margin به تنهایی استفاده کنید. به عنوان مثال: margin: 10px;.
از دیگر امکانات جالب در استفاده از حاشیه‌ها، امکان استفاده از مقدار auto است که می‌تواند در مرکزیت المان‌ها با تنظیم خودکار فاصله‌های افقی، بسیار مفید باشد. این تکنیک به خصوص در هنگام ایجاد صفحات مشخص با اندازه ثابت مفید است.
برای تغییر حاشیه هر سمت، شما می‌توانید از ویژگی‌های margin-top, margin-right, margin-bottom, و margin-left استفاده کنید تا هر کدام را به صورت جداگانه تنظیم کنید. به این ترتیب، می‌توانید طراحی‌های جالبی با فاصله‌های نامساوی ایجاد کنید.
مثالی از نحوه استفاده از ویژگی‌های حاشیه
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 20px auto;
border: 1px solid black;
}
</style>
<div class="box">این یک باکس است</div>
در این مثال، کلاس box یک باکس آبی رنگ ایجاد می‌کند.
خط اول درون تگ <style> عرض و ارتفاع باکس را به 100 پیکسل تنظیم می‌کند.
رنگ پس‌زمینه با استفاده از background-color به رنگ آبی روشن تنظیم شده است.
با استفاده از margin: 20px auto; حاشیه بالا و پایین به ۲۰ پیکسل تنظیم شده و استفاده از مقدار auto باعث می‌شود که باکس به صورت افقی در مرکز صفحه قرار گیرد.
در نهایت، با استفاده از border یک حاشیه سیاه رنگ نازک دور باکس نمایش داده می‌شود.
توجه داشته باشید که تنظیم حاشیه‌ها به درک بهتر از نحوه قرارگیری عناصر در صفحه و ایجاد فاصله‌هایی جهت تجربه کاربری بهتر کمک می‌کند. همیشه سعی کنید که از مقادیر نسبی بجای مقادیر ثابت استفاده کنید، تا صفحه شما در سایزهای مختلف به درستی نمایش داده شود.