CODEWITHSUNDEEP
htmlcsshtml-lists
VortixDev
VortixDev

Reputation: 1013

CSS Padding is overflowing parent

I'm trying to make a horizontal navbar, and I've got it sitting at the top of the page with each of the three list items filling up a third of the space, all good on that part.

The issue is when I try to make the anchor tag (which is within the list item) fill up all of the list item's space. I set it to display: block;, so it takes up the full width, however I can't get it to fill up vertical space how I want it to. I can use height: 100% and it will fill up the space, however if I do it that way the anchor tag's text rests at the top of the list item's space, however I want it to be vertically centred. Top and bottom padding came to mind for this, so I tried setting padding: 100%;. When this happened, I could no longer see the text of the anchor tag. By dragging the space with my mouse it looks like the tag is taking up more space than is in the list item.

This is an image of the nav bar with height: 100%;: Nav bar Note: the red lines surrounding each section are the borders which I set visible to view boundaries

The relevant HTML code is as follows:

<ul class="main_nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Test page</a></li>
    <li><a href="#">Test page 2</a></li>
</ul>

The relevant CSS code is as follows:

body * {
    font-family: Roboto sans-serif;

    box-sizing: border-box;

    border: solid 2px red;
}

header ul.main_nav {
    background-color: gray;
    color: #EBEBEB;

    margin: 0px;

    padding: 0px;

    width: 100%;
    height: 50px;

    list-style-type: none;
    list-style-position: inside;

    overflow: hidden;
}

header ul.main_nav li {
    text-align: center;

    float: left;

    width: calc(100% / 3);
    height: 100%;
}

header ul.main_nav li a {
    display: block;

    height: 100%;

    text-decoration: none;
}

EDIT: I would rather not use fixed sizes to solve this, as I'd largely prefer being able to edit a single value (50px for the ul) to adjust the whole navbar

Upvotes: 0

Views: 983

Answers (1)

dippas
dippas

Reputation: 60553

you can do this using flexbox,

*,
*:before,
*::after {
  box-sizing: border-box;
}
body * {
  font-family: Roboto sans-serif;
  border: solid 2px red;
}
ul.main_nav {
  background-color: gray;
  color: #EBEBEB;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 50px;
  list-style-type: none;
  list-style-position: inside;
  display: flex
}
ul.main_nav li {
  flex: 1;
  display: flex;
  height:100%;
}
ul.main_nav li a {
 flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: yellow
}
<ul class="main_nav">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Test page</a>
  </li>
  <li><a href="#">Test page 2</a>
  </li>
</ul>

if you are going to have one line only in your menu, yo can use line-height, see below

*,
*:before,
*::after {
  box-sizing: border-box;
}
body * {
  font-family: Roboto sans-serif;
  border: solid 2px red;
}
ul.main_nav {
  background-color: gray;
  color: #EBEBEB;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 50px;
  list-style-type: none;
  list-style-position: inside;
  overflow: hidden;
  font-size: 0;
}
ul.main_nav li {
  text-align: center;
  width: calc(100% / 3);
  height: 100%;
  display: inline-block;
  font-size: 16px
}
ul.main_nav li a {
  display: block;
  height: inherit;
  background: yellow;
  text-decoration: none;
  line-height: 32px /*this should be the same value has the parent height*/
}
<ul class="main_nav">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Test page</a>
  </li>
  <li><a href="#">Test page 2</a>
  </li>
</ul>

Upvotes: 2

Related Questions