Adjust the size using padding alone

My CSS specifies font size of 14px, line height of 14px, and padding of 7px on the top and bottom. The total should be 28px.

When I apply these styles in a div, it results in a height of 28px. However, when applied to a ul li a element, the height becomes 30px. Can anyone help me understand where this extra 2px is coming from?

I am trying to achieve an exact height in a ul, and I believe I need to adjust the padding on the ul li a elements since I want them all to be clickable.

Feel free to check out this example: http://jsfiddle.net/nyv4x9jv/

#menu {
    padding:7px 14px;
    font-family: 'verdana', sans-serif;
    font-size:14px; line-height:14px;
    margin:0;
    display: inline-block;
    background-color:red;

}

#menu2 ul li a {
    padding:7px 15px;
    font-size:14px; line-height:14px;
    font-family: 'verdana', sans-serif;
    list-style-type:none;
    text-decoration: none;
    margin:0;
    background-color:red;
}

#menu2, ul, li, a  {
    margin:0; padding:0; border:0;
}


<div id="menu"> menu </div>

    <br><br>

    <div id="menu2">
    <ul>
        <li><a href="#"> menu</a></li>
    </ul>
</div>

Answer №1

One key distinction is that the div element functions as a block-level element, while the a element behaves as an inline-level element.

As previously mentioned, it's advisable to avoid setting line-height directly on the a element in your CSS. Instead, consider applying it at a higher level (simply remove it from the styles for the a element).

#menu2 ul li{
    padding:7px 15px;
    font-size:14px; line-height:14px;
    font-family: 'verdana', sans-serif;
    list-style-type:none;
    text-decoration: none;
    margin:0;
    background-color:red;
}

To delve deeper into the nuances of line-height properties, refer to:

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

Answer №2

By using the box-sizing:border-box property, you can easily set a fixed height on an anchor link while accounting for padding and borders.

All that's left to do is ensure that the combined padding and line-height values equal the total height you specified.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#menu2 ul {
  font-family: 'verdana', sans-serif;
  list-style-type: none;
  text-decoration: none;
  margin: 0;
  background-color: red;
}
#menu2,
ul,
li,
a {
  margin: 0;
  padding: 0;
  border: 0;
}
#menu2 ul li a {
  font-size: 14px;
  line-height: 14px;
  padding: 7px;
  height: 28px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: white;
  background: #f09d09;
}
#menu2 ul li a:hover {
  background: green;
}
<div id="menu2">
  <ul>
    <li><a href="#"> menu</a>
    </li>
  </ul>
</div>

Answer №3

Consider adjusting the padding settings for the ul element directly, rather than the a element.

#navMenu ul{
    padding: 8px 16px;
}

Check out the example on CodePen: http://codepen.io/example123/

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

Tips for rendering the stencil as invisible and disabled while still allowing other features (such as rotating and flipping) to remain enabled within the react-advanced-cropper

I am facing a challenge where I need to hide and disable the stencil and overlay in react-advanced-cropper, while keeping all other features like rotation and flipping enabled. Is there a specific property in this library that allows me to disable the st ...

The use of scaffolding and grid structures within the Twitter Bootstrap framework

I'm currently utilizing the bootstrap scaffolding/grid system in the following manner: <div class="row-fluid"> <div id="insta-shop-filter" class="span2 visible-desktop"> </div> <div id="insta-shop-grid" class="span1 ...

Creating rounded buttons with Font Awesome icons and hover effects

I am currently working on creating buttons similar to the design shown in the image below. https://i.sstatic.net/hMqHs.png I have utilized stacked Font Awesome icons to place the icons atop a circle, resulting in this look: https://i.sstatic.net/rtEkP.p ...

Enhance the CSS Transition for a Seamless Bootstrap Toggle Menu Experience

I attempted to modify the Bootstrap Toggle Menu slide effect from top to bottom to left to right. You can view the website here: After experimenting with various CSS codes (I prefer using pure CSS for this effect), I finally discovered this one: .collaps ...

What steps can be taken to modify the style of a single button belonging to a broader group of elements?

Is there a way to hide the save button within a Vue Modal without affecting other buttons with the same class? .btn.btn-primary { display: none; } Simply targeting .btn-primary in the CSS affects all elements with that class, and adding .modal woul ...

How to perfectly align columns using Bootstrap

Looking to create two fixed columns in Bootstrap. The current layout can be seen in the image below: https://i.sstatic.net/w41sD.png I want the left and right column to align at the top regardless of the number of items in each column. Refer to the image ...

Show two spans, each underneath the other

I am looking to showcase two span elements, one below the other. Take a look at my HTML code snippet <img class="profile-photo margin-0" data-ng-if="!question.isOpen" ng-src="{{question.profilePicId ? que ...

How can a variable value be implemented in HTML style within Jinjia2?

Wondering how to dynamically position a small image on a web page based on a variable value? For instance, if the v_position variable is set at 50, you want the image to be centered horizontally. And if it's set at 100, the image should display at the ...

What could be the reason for the absence of an option in the navbar

As I work on creating a navbar menu that functions as an accordion on desktop and mobile, I encountered an issue. When I click on the dropdown on mobile, it displays one less item than intended. This seems to be related to a design error where the first it ...

Having difficulty adjusting the text to match the image alignment

Having trouble aligning the text tag inside the H1 above the image. It keeps appearing in the wrong place, either on the left or right. I've tried including the h1 inside the container, but it just disappears. <!doctype html> <html> <h ...

Achieving equal height for the englobing/parent div and the inner divs

To achieve a standard left, middle, and right column layout, it is necessary for me to enclose various inner divs of different heights within a surrounding/parent div. It is crucial that the parent div adjusts its height to match the tallest inner div, whi ...

Mobile Safari on iOS devices is known for its capability to overlay HTML5 <video> on top of everything

Although a similar question was asked 6 years ago without any answers, I am currently facing the same issue. Problem: The <video> tag in my Angular/Ionic application overlaps my image and two buttons in iOS Mobile Safari - no matter what I try! It ...

AngularJS combined with jVectorMap allows for the seamless rendering of small interactive

I am facing a similar issue to one discussed here, but with some minor differences. Initially, my map loaded without any problem on the site. However, after adding Angularjs to the site, I noticed a 'small' map issue. It seems like a simple code ...

Changing Background Color on Div Click

After spending a considerable amount of time on this, I find myself getting confused and stuck. It seems like I might be overlooking something crucial. Essentially, my code is designed to have the default div background (gamebg), and upon clicking one of t ...

Tables that adapt to different screen sizes, displaying perfectly on desktop but with slight variations on mobile devices

I recently experimented with a demo to enhance the performance of tables on my website in development. The demo worked flawlessly on my desktop when I resized using a responsive tester extension for Chrome: https://i.stack.imgur.com/KzFiR.jpg However, u ...

Tips for minimizing the padding/space between dynamically generated div elements using html and css

Currently, I have 4 dropdown menus where I can choose various options related to health procedures: Area, specialty, group, and subgroup. Whenever I select a subgroup, it dynamically displays the procedures on the page. However, the issue I am facing is th ...

What is the best way to implement CSS rules for a hidden submenu?

Can anyone help me figure out how to apply CSS rules for a hidden submenu? I've attempted to use some JavaScript, but it's not working as expected. Below is a sample of the code I'm working with. The idea is that when you click on the anchor ...

What could be causing the Bootstrap Navbar toggle icon button to not display navigation items when clicked?

Bootstrap has been a reliable tool for my projects until I encountered an issue in an Angular project. The navbar toggler icon button is visible, but clicking on it does not display the navigation items. <div> <nav class="navbar navbar-ex ...

Achieving Text Wrapping Around Unconventional Shapes Using CSS

I'm currently facing a challenge in getting text to wrap around an irregular shape on a web page. Despite numerous attempts, I have yet to find a solution that meets my requirements. Attached is an image illustrating the layout I am aiming for. The ...

Diverging Width Values Between Chrome and Firefox with Jquery's .width() Method

Currently, I am implementing this JQuery script for my table. $(document).ready(function () { var tableBottom = $(window).height() - $('#compare-table').height(); $(window).scroll(function (event) { var y = $(this).scrollTo ...