Html - problem with different right border height

MichaLeko
January 22, 2024
217 views
4 votes
4 Answers

I have problem with height of one of right border in navigation menu. I know that is because of emoji that I use in that problematical case, because without the red_circle emoji everything is the same. The border has full height only for "LIVE :red_circle:" and I want to every right border look like that. I set margin value to 0, but it doesn’t work. Only deleting the emoji solves the problem, but it doesn’t what I want.

nav {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  text-align: center;
}

nav ul {
  list-style: none;
  padding: 0;
  margin-top: 0px;
  background-color: rgb(43, 208, 226);
  border-bottom: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

nav li {
  display: inline-block;
  margin: 0px;
  padding: 20px;
  background-color: rgb(211, 226, 43);
  font-size: 20px;
  border-right: 2px solid black;
}

nav li:last-child {
  border-right: none;
}

<header>
  <div id="logo-banner"></div>
  
  <nav>
    <ul>
      <li><a href="">HOME</a></li>
      <li><a href="">DESCRIPTION</a></li>
      <li><a href="">HISTORY</a></li>
      <li><a href="">LIVE🔴</a></li>
      <li><a href="">GALLERY</a></li>
      <li><a href="">CONTACT</a></li>
    </ul>
  </nav>
</header>

Tags: css html

Answers

Adding a line-height to your anchor will fix it.

In example below, it’s set to the same height as the font size:

line-height: 20px;

a {
  line-height: 20px;
}

nav {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  text-align: center;
}

nav ul {
  list-style: none;
  /* Usunięcie domyślnego stylu kropki dla listy */
  padding: 0;
  /* Usunięcie wewnętrznego odstępu dla listy */
  margin-top: 0px;
  background-color: rgb(43, 208, 226);
  border-bottom: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

nav li {
  display: inline-block;
  /* Umieszczenie elementów listy obok siebie w jednej linii */
  margin: 0px;
  /* Odstęp między elementami */
  padding: 20px;
  background-color: rgb(211, 226, 43);
  font-size: 20px;
  border-right: 2px solid black;
}

nav li:last-child {
  border-right: none;
}

<header>
  <div id="logo-banner">

  </div>
  <nav>
    <ul>
      <li><a href="">HOME</a></li>
      <li><a href="">DESCRIPTION</a></li>
      <li><a href="">HISTORY</a></li>
      <li><a href="">LIVE🔴</a></li>
      <li><a href="">GALLERY</a></li>
      <li><a href="">CONTACT</a></li>
    </ul>
  </nav>
</header>

Target the anchor element and add a line-height to it

nav li a {
    line-height: 100%;
}

nav {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  text-align: center;
}

nav ul {
  list-style: none;
  padding: 0;
  margin-top: 0px;
  background-color: rgb(43, 208, 226);
  border-bottom: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

nav li {
  display: inline-block;
  margin: 0px;
  padding: 20px;
  background-color: rgb(211, 226, 43);
  font-size: 20px;
  border-right: 2px solid black;
}

nav li a {
  line-height: 100%;
}

nav li:last-child {
  border-right: none;
}

<header>
  <div id="logo-banner"></div>

  <nav>
    <ul>
      <li><a href="">HOME</a></li>
      <li><a href="">DESCRIPTION</a></li>
      <li><a href="">HISTORY</a></li>
      <li><a href="">LIVE🔴</a></li>
      <li><a href="">GALLERY</a></li>
      <li><a href="">CONTACT</a></li>
    </ul>
  </nav>
</header>

I would move the flex to your ul instead, then all li on the same row will be equal heights

nav {
  margin: 0;
  padding: 0;
}

nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  /* Usunięcie domyślnego stylu kropki dla listy */
  padding: 0;
  /* Usunięcie wewnętrznego odstępu dla listy */
  margin-top: 0px;
  background-color: rgb(43, 208, 226);
  border-bottom: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

nav li {
  display: flex;
  align-items: center;
  /* Umieszczenie elementów listy obok siebie w jednej linii */
  margin: 0px;
  /* Odstęp między elementami */
  padding: 20px;
  background-color: rgb(211, 226, 43);
  font-size: 20px;
  border-right: 2px solid black;
}

nav li:last-child {
  border-right: none;
}

<header>
  <div id="logo-banner">

  </div>
  <nav>
    <ul>
      <li><a href="">HOME</a></li>
      <li><a href="">DESCRIPTION</a></li>
      <li><a href="">HISTORY</a></li>
      <li><a href="">LIVE🔴</a></li>
      <li><a href="">GALLERY</a></li>
      <li><a href="">CONTACT</a></li>
    </ul>
  </nav>
</header>

I don’t like the line height solution that many people have shown.
In fact if it’s a nav, I’d recommend completely getting rid of the list elements. It makes your html easier to read, and fewer issues.

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 0;
  padding: 0;
  padding-top: 10px; /*you can remove this padding if you like*/
  text-align: center;
  background-color: rgb(43, 208, 226);
  border-bottom: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

nav a {
  background-color: rgb(211, 226, 43);
  font-size: 20px;
  padding: 20px;
  border-right: 2px solid black;
}

<header>
  <div id="logo-banner">

  </div>
  <nav>
    <a href="">HOME</a>
    <a href="">DESCRIPTION</a>
    <a href="">HISTORY</a>
    <a href="">LIVE🔴</a>
    <a href="">GALLERY</a>
    <a href="">CONTACT</a>
  </nav>
</header>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – problem with different right border height

Answers