How to remove the space between the menu bar and the top of the page in CSS?
Many times, you may find that you have a menu bar at the top of your website and you prefer this menu bar to be tightly attached to the top of the page. Now, it might be possible that you encounter this issue where an additional space exists between the menu and the top of the window, making it not visually appealing. You might be wondering how to remove this space.
There could be various reasons for the existence of this space. One of the most common reasons is having margin or padding values in the HTML elements or even in the body. To solve this issue, simply adjust or remove these values.
Another factor that might cause spaces is using other HTML tags above or below the menu bar. If these tags have margin or padding values, it might easily create this space.
Additionally, there could be other properties like display, position, or CSS framework attributes, such as those from Bootstrap or Foundation, that may also result in this space. Therefore, it's better to examine all possible factors.
To quickly get rid of these spaces and build a professional menu bar, study the code below.
html, body {
margin: 0;
padding: 0;
}
header {
height: 50px;
background-color: #333;
color: white;
position: fixed;
top: 0;
width: 100%;
}
Code Explanation Line by Line
html, body
In this line, we set the margin and padding for the default HTML and body tags to zero to ensure that there are no default spaces present.
header
Here, we define the properties associated with the header tag.
height: 50px;
This sets the height of the menu bar to 50 pixels.
background-color: #333;
We define the background color of the menu bar to be a charcoal color.
color: white;
This sets the text color of the menu bar to white.
position: fixed;
The position of the menu bar is fixed to always remain at the top of the page.
top: 0;
This sets the vertical position of the menu bar to the top (attached to the top of the window).
width: 100%;
This makes the width of the menu bar span the entire width of the page.