Get rid of space beneath LABEL element with CSS

Question

This is a problem I have managed to work around for years whenever it comes up. I would prefer to understand the problem and what the ACTUAL solution should be.

.if-nav-menu {
  background-color: #E6C44D;
  display: block;
  overflow: hidden;
}

.if-nav-menu .if-nav-menu-brand {
  float: left;
  padding: 0.25rem 2rem 0.25rem 1rem;
}

.if-nav-menu .if-nav-menu-brand label {
  color: #664F00;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.if-nav-menu a {
  background-color: #E6C44D;
  color: #664F00;
  display: block;
  float: left;
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  padding: 0.25rem 1rem;
  text-align: center;
  text-decoration: none;
}

.if-nav-menu a:hover {
  background-color: #E7B70C;
  color: #664F00;
}

.if-nav-menu a.active {
  background-color: #C89C00;
  color: #FFF7D9;
}

<nav id="MainTopNav" class="if-nav-menu">
  <div class="if-nav-menu-brand"><label>Page Title</label></div>
  <a href="/admin/ProductList/" class="active">Products</a>
  <a href="#">Catalog Products</a>
  <a href="#">Themes</a>
</nav>

I end up with the following ...

The bottom of the toolbar is pushed down.. Looking at the Developer tools I can see that it's not a result of errant padding or margin settings on either the DIV element or the LABEL element. It does appear to be related to the DIV tag however and not an issue with the LABEL.

I have tried everything I could find, although admittedly that's not a lot. Usually this problem is the result of padding or margin oversights or line height settings. I don't see that as the cause here. Also the HTML is written in a single line with no white space breaks (see the <div class="if-nav-menu-brand"><label>Page Title</label></div> above) which I know can cause issues on occasion.

I am hoping that someone can help me discover why there is spacing beneath the label and how I can fix it.

I'm curious why are you using a label tag for the page title at all? Labels are intended to describe form elements. The issue might be that labels are inline elements. See https://stackoverflow.com/a/17905828/5297207 — Talya S, Mar 30 '21 at 15:44
As suggested by Talya, maybe cleaning up your HTML a bit would already help. Such a navigation is typically rendrered through a list, order or not (I prefer
myself, but you'll often find
being used). As suggested in an answer, not using floats will certainly help big time also... — Laurent S., Mar 30 '21 at 15:55

Manas Khandelwal · Accepted Answer · 2021-03-30T15:54:08.957

You should use flexbox instead of floats. Simple, Easy and more efficient.

Try this:

.if-nav-menu {
  background-color: #e6c44d;
  display: flex;
  overflow: hidden;
  align-items: center;
}

.if-nav-menu .if-nav-menu-brand {
  padding: 0.25rem 2rem 0.25rem 1rem;
}

.if-nav-menu .if-nav-menu-brand label {
  color: #664f00;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}

.if-nav-menu .links {
  display: flex;
}

.if-nav-menu a {
  background-color: #e6c44d;
  color: #664f00;
  font-family: "Poppins", sans-serif;
  font-size: 0.8rem;
  padding: 0.5rem 1rem;
  text-align: center;
  text-decoration: none;
}

.if-nav-menu a:hover {
  background-color: #e7b70c;
  color: #664f00;
}

.if-nav-menu a.active {
  background-color: #c89c00;
  color: #fff7d9;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">

<nav id="MainTopNav" class="if-nav-menu">
  <div class="if-nav-menu-brand"><label>Page Title</label></div>
  <div class="links">
    <a href="/admin/ProductList/" class="active">Products</a>
    <a href="#">Catalog Products</a>
    <a href="#">Themes</a>
  </div>
</nav>

score 0 · Answer 2 · answered Mar 30 '21 at 15:45

line-height: 15px; for the page title worked.

.if-nav-menu {
  background-color: #E6C44D;
  display: block;
  overflow: hidden;
}

.if-nav-menu .if-nav-menu-brand {
  float: left;
  padding: 0.25rem 2rem 0.25rem 1rem;
  line-height: 15px;
}

.if-nav-menu .if-nav-menu-brand label {
  color: #664F00;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.if-nav-menu a {
  background-color: #E6C44D;
  color: #664F00;
  display: block;
  float: left;
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  padding: 0.25rem 1rem;
  text-align: center;
  text-decoration: none;
}

.if-nav-menu a:hover {
  background-color: #E7B70C;
  color: #664F00;
}

.if-nav-menu a.active {
  background-color: #C89C00;
  color: #FFF7D9;
}

<nav id="MainTopNav" class="if-nav-menu">
  <div class="if-nav-menu-brand"><label>Page Title</label></div>
  <a href="/admin/ProductList/" class="active">Products</a>
  <a href="#">Catalog Products</a>
  <a href="#">Themes</a>
</nav>

Yeah ... I tried this and what I didn't like about this as a "proper" solution is that the ```line-height``` of the label is ```1rem``` or about ```24px```. This means that you are setting the line-height to something LESS than the actual font-size. I shouldn't have to do that. Feels "hacky". — Gary O. Stenstrom, Mar 30 '21 at 17:23

Get rid of space beneath LABEL element with CSS

2 Answers2