Why do my padding and font size fail to match the height of my container?

When setting the height of my boxes to match the height of my <nav>, I encountered overflow issues. Despite using a 10rem height for the nav and a 2.25rem font, calculating the padding as 10-2.25/2 didn't result in the desired outcome. Can someone explain why this happened and how to make the boxes align perfectly with the container?

body{
      background-color: hsl(168, 39%, 64%);
      margin:0;
      padding:0;
    }

.ul-nav{
    display:flex;
    flex-direction:row;
    flex-wrap: nowrap;
    justify-content:space-evenly;
    align-content:stretch;
    height: 100%;
    margin: 0;
    list-style: none;
    margin-left: 7.5rem;
}
.li-nav{
    text-align: center;
}
.nav{
    display: flex;
    position: fixed;
    margin:0;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 10rem;
    background-color: hsl(178, 40%, 40%);
}
.nav-a{
    text-decoration: none; 
    color: black;
    display:block;
    font: Arial;
    font-size: 2.25rem;
    margin: 0;
    padding: 3.72rem;
}
.nav-a:hover{
    text-decoration: none;
    background-color: hsl(178, 40%, 30%);
}
.nav-a:visited{
    text-decoration: none;
}

I'm puzzled as to why the padding calculation isn't just (height - font size) / 2. As a beginner in HTML/CSS who recently completed certification, I would appreciate a thorough explanation since this is my first project created after training.

<nav id="nav-bar" class="nav">
  <ul class="ul-nav">
    <li class="li-nav"><a class="nav-a" href="Grace.html">Home</a></li>
    <li class="li-nav"><a class="nav-a" href="about.html">About</a></li>
    <li class="li-nav"><a class="nav-a" href="pricing.html">Pricing</a></li>
    <li class="li-nav"><a class="nav-a" href="reviews.html">Reviews</a></li>
    <li class="li-nav"><a class="nav-a" href="contact.html">Contact</a></li>
  </ul>
</nav>
htmlcss

Answer №1

One reason for this issue is that the height of li a exceeds the height of the nav. There are two straightforward ways to address this problem:

  1. Include overflow: hidden in the nav CSS.
  2. Eliminate the height property from the nav and adjust the padding instead. This method is recommended

body {
  background-color: hsl(168, 39%, 64%);
  margin: 0;
  padding: 0;
}

.ul-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-content: stretch;
  height: 100%;
  margin: 0;
  list-style: none;
  margin-left: 7.5rem;
}

.li-nav {
  text-align: center;
}

.nav {
  display: flex;
  position: fixed;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  /* HERE: YOU CAN REMOVE THIS */
  height: 10rem;
  background-color: hsl(178, 40%, 40%);
  /* HERE */
  overflow: hidden;
}

.nav-a {
  text-decoration: none;
  color: black;
  display: block;
  font: Arial;
  font-size: 2.25rem;
  margin: 0;
  padding: 3.72rem;
}

.nav-a:hover {
  text-decoration: none;
  background-color: hsl(178, 40%, 30%);
}

.nav-a:visited {
  text-decoration: none;
}
<nav id="nav-bar" class="nav">
  <ul class="ul-nav">
    <li class="li-nav"><a class="nav-a" href="Grace.html">Home</a></li>
    <li class="li-nav"><a class="nav-a" href="about.html">About</a></li>
    <li class="li-nav"><a class="nav-a" href="pricing.html">Pricing</a></li>
    <li class="li-nav"><a class="nav-a" href="reviews.html">Reviews</a></li>
    <li class="li-nav"><a class="nav-a" href="contact.html">Contact</a></li>
  </ul>
</nav>

Answer №2

It is recommended to remove the height property of the Nav element as it overrides the padding setting. When you set height: 10rem;, it applies the padding at the top but cannot do so at the bottom due to this override. Removing the height property would be a better approach.

body {
  background-color: white;
  margin: 0;
  padding: 0;
}

.ul-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-content: stretch;
  height: 100%;
  margin: 0;
  list-style: none;
  margin-left: 7.5rem;
}

.li-nav {
  text-align: center;
}

.nav {
  display: flex;
  position: fixed;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  width: 100%;
  /* HERE: YOU CAN REMOVE THIS */
  height: 10rem;
  background-color: red;
  /* HERE */
  overflow: hidden;
}

.nav-a {
  text-decoration: none;
  color: black;
  display: block;
  font: Arial;
  font-size: 2.25rem;
  margin: 0;
  padding: 3.72rem;
  transition: 0.3s;
  font-weight: bold;
}

.nav-a:hover {
  text-decoration: none;
  background-color: darkRed;
  color:white;
}

.nav-a:visited {
  text-decoration: none;
}
<nav id="nav-bar" class="nav">
  <ul class="ul-nav">
    <li class="li-nav"><a class="nav-a" href="Grace.html">Home</a></li>
    <li class="li-nav"><a class="nav-a" href="about.html">About</a></li>
    <li class="li-nav"><a class="nav-a" href="pricing.html">Pricing</a></li>
    <li class="li-nav"><a class="nav-a" href="reviews.html">Reviews</a></li>
    <li class="li-nav"><a class="nav-a" href="contact.html">Contact</a></li>
  </ul>
</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Efficient code for varying layouts of disabled Angular Material buttons

I've been wondering if there's a simpler way to customize the appearance of a disabled button using Angular Material. Currently, I achieve this by utilizing an ng-container and ng-template. While this method gets the job done, the code is not ve ...

cssangularif-statementangular-material

Adjustable slider height in WordPress

Struggling with the height of the slider on my website. I've tried various CSS adjustments and even tweaked the Jquery, but it still doesn't display properly on mobile devices. For instance, setting a height of 300px looks perfect on desktop brow ...

jqueryhtmlcsswordpress

Ways to initiate animation using CSS when the page loads

Is there a way to initialize the counter on page load? Even though I was successful in making it start on hover, I couldn't figure out how to make it work when the page loads. Here is the JavaScript code: var root = document.querySelector(':root ...

javascriptcssanimationtextcounter

Saving Selected Radio button values into Jquery Array

In my HTML table, there are multiple rows with radio buttons representing the sexes in the 0th position of <td>. I am trying to store the values of sex (either 1 or 0) in an array. Below is a snippet for a table with 3 rows. HTML Code: <table> ...

javascriptjqueryhtml

Is the background image unable to fill up the entire screen?

I'm currently facing an issue with my webpage's background not covering the entire vertical space. Despite trying different solutions and referring to previous posts, I haven't been able to resolve it yet. Here is the relevant code: <div ...

htmlcss

Having trouble accessing a JavaScript variable in Javascript due to reading null property 'value'

What I Require I am in need of passing a URL variable from an HTML document to a JavaScript file. HTML Snippet <script> var urlParam = "{{ page_param.asy_request | replace('&','&')}}"; urlParam = urlParam.rep ...

javascripthtml

Sending Email Form in PHP using JQuery and Ajax for seamless user experience

Looking to create an email form in HTML with PHP, but running into the issue of the page reloading after submitting? Many people turn to jQuery and AJAX to solve this problem. While you may have come across solutions on Stack Overflow, as a non-native Engl ...

javascriptphpjqueryhtmlajax

Adjust the CSS extension within the about:config settings of Firefox

I've been using the Zotero extension and I want to adjust how TinyMCE handles paragraph spacing. I'm looking to customize the CSS in extensions.zotero.note.css by adding specific CSS rules. The reason I want to make these changes is because I fe ...

htmlcssfirefoxtinymce

Exclusive Design for Progress Bar in HTML and CSS

I am currently working on creating a unique progress bar with numbers at both ends, where the left number represents the current value and the right number represents the maximum or target value. Although I have managed to display the two numbers, I am fac ...

htmlcss

Tips for centring navigation horizontally and making it responsive using CSS

Is there an effective way to horizontally center the navigation within a div using responsive CSS? HTML: <nav id="centermenu"> <ul> <li><a href="#">Business</a></li> <li><a href="#">Spec ...

css

Utilizing CSS and javascript to display position indicators on a map

I need help creating a basic webpage with the following functionality: The page will contain a map as a background image in a div, with clickable images placed on top (each within its own div). When these images are clicked, markers should appear or disap ...

htmlcssgoogle-maps

Why does the lazy loading feature keep moving the background image around?

While trying to incorporate lazy loading on my website, I encountered an issue where the image position would change after it was fully loaded and made visible. I experimented with rearranging the order in which my JavaScript and CSS files were called, bu ...

javascripthtmlcsslazy-loading

Dynamic user group system that leverages Ajax technology for seamless integration with an HTML interface, powered by PHP and

I am new to this, so please forgive my lack of knowledge. Currently, I am in the process of creating an Ajax-driven web application for managing user contact groups. This application allows users to store contacts based on assigned groups. Once a user con ...

phpjavascripthtmljquery

Having trouble getting the timer function to execute upon page load in JavaScript

My goal is to have my basic timer function activate when the page loads. However, I'm encountering issues with it not working as intended. I suspect there may be an error in the if else loop, possibly here: setTimeout(function(tag, sec), 1000);. How c ...

javascripthtml

Pedaling back and forth along a sequence

Is there a way to implement forward and backward buttons for a clickable list without using arrays, as the list will be expanding over time? I have already achieved changing color of the listed items to red, but need a solution to navigate through the list ...

javascriptjqueryhtmlcss

Disappearing sticky-top navbar in Bootstrap when scrolling

I'm having trouble with the navbar on my website. Currently, it sticks to the top until I scroll out of the hero-image and then disappears. I would prefer the navbar to remain present throughout the entire page. Any suggestions on how to achieve this? ...

htmlcsstwitter-bootstrapbootstrap-4

Consecutive pair of JavaScript date picker functions

My issue involves setting up a java script calendar date picker. Here are my input fields and related java scripts: <input type="text" class="text date" maxlength="12" name="customerServiceAccountForm:fromDateInput" id="customerServiceAccountForm:from ...

javascripthtml

personalized styles based on user preferences

My website features a gaming section where users can view quick status updates of their stats using colors like blue, red, and green. I am looking to generate something similar for each user. Here is what I have so far: <style> .box2 { height: ...

phpcss

Adjust text alignment of SVG elements using CSS

I am facing an issue where I am unable to change the x and y variables of Svg text tags using CSS. This should work as it does with Svg and . However, I am only able to make changes if I directly add the x and y positions in the HTML code. Html: <svg ...

htmlcsssvg

Struggling with setting up a PHP and Ajax registration and login system

Struggling with my code and in need of assistance. Desperately trying to set up a register form where users can input their username and password to sign up. Planning to utilize ajax, however, the integration seems faulty. For testing purposes, I tried ech ...

javascriptphpjqueryhtmlajax