چگونه فاصله بین منو بار و بالای صفحه را در CSS حذف کنیم؟
خیلی وقت‌ها پیش می‌آید که شما یک منو بار در بالای صفحه وب‌سایت خود دارید و دوست دارید این منو بار به صورت چسبیده به بالای صفحه نمایش قرار گیرد. حالا ممکن است با این مسئله مواجه شوید که یک فاصله اضافی بین منو و بالای پنجره وجود دارد که به نظر منظره‌ی خوبی نمی‌دهد. حتما با خودتان می‌پرسید که چگونه می‌توان این فاصله را حذف کرد؟
دلایل مختلفی ممکن است برای وجود این فاصله وجود داشته باشد. یکی از رایج‌ترین این دلایل، وجود مقادیر مارجین (margin) یا پدینگ (padding) در عناصر HTML یا حتی در body است. برای حل این مسئله، کافیست این مقادیر را تنظیم یا حذف کنید.
یکی دیگر از عواملی که ممکن است باعث ایجاد فاصله شود، استفاده از تگ HTML دیگری در بالا یا پایین منو بار است. اگر این تگ‌ها مقادیر مارجین یا پدینگ داشته باشند، می‌توانند به راحتی این فاصله را ایجاد کنند.
همچنین ممکن است خاصیت‌های دیگری مثل display، position یا حتی ویژگی‌های مربوط به فریم‌ورک‌های CSS مانند Bootstrap یا Foundation باعث این فاصله شوند. بنابراین، بهتر است که همه عوامل ممکن را بررسی کنید.
برای اینکه بتوانید به سرعت از شر این فاصله‌ها خلاص شوید و یک منو بار حرفه‌ای بسازید، نمونه کد زیر را مطالعه کنید.
html, body {
margin: 0;
padding: 0;
}
header {
height: 50px;
background-color: #333;
color: white;
position: fixed;
top: 0;
width: 100%;
}
توضیح کد خط به خط
html, body
در این خط، مارجین و پدینگ پیش‌فرض تگ‌های html و body را به صفر رسانده‌ایم تا هیچ فاصله‌ای به طور پیش‌فرض وجود نداشته باشد.
header
در اینجا ویژگی‌های استایل‌دهی مرتبط با تگ header انجام شده است.
height: 50px;
ارتفاع منو بار را 50 پیکسل تنظیم می‌کنیم.
background-color: #333;
رنگ پس‌زمینه منو بار را به رنگ خاکستری تیره تنظیم می‌کنیم.
color: white;
رنگ متن منو بار را سفید تنظیم می‌کنیم.
position: fixed;
موقعیت منو بار به صورت ثابت تنظیم می‌شود تا همیشه در بالای صفحه بماند.
top: 0;
موقعیت عمودی منو بار را در صفر (چسبیده به بالای پنجره) تنظیم می‌کنیم.
width: 100%;
عرض منو بار را طوری تنظیم می‌کنیم که کل عرض صفحه را پوشش دهد.