Gaps at the top and side of navigation bar buttons

问题

I'm creating a website and have run into a minor but incredibly infuriating problem.

I'm creating a Navigation bar and the buttons of the navigation bar have a gap between the far left, and top of the screen. In other words, all buttons have a gap from the top and the leftmost button has a gap from the left of the screen.

The relevant parts of my Stylesheet are shown below.

body {
    margin: 0px;
    padding: 0px;
    font-family: Arial;
}

.navbar_base {
    width: 100%;
    overflow: hidden;
    background-color: rgb(0, 21, 144);
    top: 0px;
    color: white;
    display: block;
}

.navbar_button {
    float: left;
    padding: 10px;
    margin: 0px;
    border-radius: 3px;
    list-style-type: none;
}

.navbar_button:hover {
    background-color: rgb(50, 64, 147);
}

I suspect it's because I have assigned the class to the list rather then the links, but I'm using MVC5 and adding classes to the Html.Actionlink() is cumbersome. I'd like to avoid this solution if possible.

Furthermore I've tried assigning margin: 0px and padding: 0px on ul like so:

ul .navbar_button {
    margin: 0px;
    padding: 0px;
}

to no avail

Also I am not interested in using Bootstrap at the moment because this is a sort of side project for a specific person and I would like to create something unique for him.

Here is the HTML portion of my code:

<div class= "navbar_base">
    <ul>
        <li class="navbar_button"> @Html.ActionLink("MainPage","MainPage") </li>
        <li class="navbar_button"> @Html.ActionLink("About","AboutPage") </li>
    </ul>
</div>

I've looked at the following questions as well, but the answers didn't help me.

Gap at top of page despite margin:0 and padding: 0

Why does this div have gaps at top and bottom

How do I get rid of the two gaps?

Note: I do realize I am still a beginner and MVC may be out of my scope but I have job to do soon and I reckoned the fastest way to learn about how to do MVC is to actually do MVC

回答1:

<div class= "navbar_base">
<ul>
    <li class="navbar_button"> @Html.ActionLink("MainPage","MainPage") </li>
    <li class="navbar_button"> @Html.ActionLink("About","AboutPage") </li>
</ul>

By default ul has some margin left properties , you can remove it by

      .navbar_base > ul{ margin-left:0px; }

回答2:

You need to remove the margin and padding from the ul too (your attempt to do so removed it from the li)

body, ul {
  margin: 0px;
  padding: 0px;
  font-family: Arial;
}

.navbar_base {
  width: 100%;
  overflow: hidden;
  background-color: rgb(0, 21, 144);
  top: 0px;
  color: white;
  display: block;
}

.navbar_button {
  float: left;
  padding: 10px;
  margin: 0px;
  border-radius: 3px;
  list-style-type: none;
}

.navbar_button:hover {
  background-color: rgb(50, 64, 147);
}

<div class="navbar_base">
  <ul>
    <li class="navbar_button"> @Html.ActionLink("MainPage","MainPage") </li>
    <li class="navbar_button"> @Html.ActionLink("About","AboutPage") </li>
  </ul>
</div>

来源：https://stackoverflow.com/questions/49276641/gaps-at-the-top-and-side-of-navigation-bar-buttons

标签

html

css

asp.net-mvc-5