Why is the line height dimension missing from my model box when padding and margin are both set to 0?

I'm currently working on a project involving CSS/HTML and using Bootstrap 4 for my layout. I have a menu where I want the boxes to be the same size as the font-size, so I've set the margin and padding to 0.

.menu-ppal {
  display: inline;
  line-height: 16px;
  box-sizing: content-box;
}

.menu-ppal li {
  display: block;
  padding: 0 10px 0 0;
  box-sizing: content-box;
}

.menu-ppal-text a {
  display: inline;
  text-decoration: none;
  margin: 0;
  padding: 0;
  font-family: 'Oxygen', sans-serif;
  font-size: 16px;
  font-weight: 700;
  background: #d6dbdf;
  color: #111a21;
  text-align: center;
  text-transform: uppercase;
}
<nav class="menu-ppal">
  <ul class="nav flex-column flex-md-row ">
    <li class="nav-item menu-ppal-text">
      <a class="nav-link" href="#">Actus</a>
    </li>
  </ul>
</nav>

Despite setting the font-size at 16px and ensuring both margin and padding are 0 according to the developer tools, the actual model box dimensions turn out to be 50.4333×21. This issue persists in various locations within my project...

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

From my understanding, there is currently no dynamic solution for achieving this effect. The workaround I used was to apply position: absolute and reduce the height accordingly.

.menu-ppal {
  display: inline;
  line-height: 16px;
  box-sizing: content-box;
}

.menu-ppal li {
  display: block;
  padding: 0 10px 0 0;
  box-sizing: content-box;
}

.menu-ppal-text a {
  display: inline;
  text-decoration: none;
  margin: 0;
  padding: 0;
  font-family: 'Oxygen', sans-serif;
  font-size: 16px;
  font-weight: 700;
  background: #d6dbdf;
  color: #111a21;
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  height: 14px;
}
<nav class="menu-ppal">
  <ul class="nav flex-column flex-md-row ">
    <li class="nav-item menu-ppal-text">
      <a class="nav-link" href="#">Actus</a>
    </li>
  </ul>
</nav>

Upon implementation, you may still observe a one pixel gap at the top with some lingering background remnants.

Answer №2

I stumbled upon a solution! In the initial part of my css file, I included a call to Google api fonts which I borrowed from the website I am trying to replicate:

@import url();

This call is quite old (seven years), and surprisingly, it gives me the desired effect... Upon inspecting with my browser's Developer tools, I noticed that the call is outdated and switched to the new one from Google:

@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');

To my dismay, this new call results in an undesirable effect!

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 assigning a cookie as the id of a div?

I've been tasked with making the selected menu stand out when the page is refreshed. I'm thinking of using a cookie to achieve this. Here's the HTML code: <div class="menuBar"> <div class="menuHeader ui-corner-top"> ...

javascriptjqueryhtmlcookies

Encountering a "Cannot modify" error in wp-admin while using inspect element

It seems like there is a slight error appearing in the Inspect Element Source Tab of Google Chrome (also checked in Firefox). I have searched extensively for a solution but haven't found anything helpful. My Wordpress theme displays wp-admin in inspec ...

phpcsswordpress

Difficulty encountered in aligning items within neighboring table cells vertically

Currently, I am facing a styling issue with a few table rows. In this particular screenshot: https://i.sstatic.net/FcmJW.png The cells in the blue and red circles are part of a table row (with a height of 50px). Both are set to "vertical-align:top". The ...

htmlcssvertical-alignment

There seems to be a PHP syntax error within the INSERT INTO statement, resulting in SQL state 37000 when executing SQL

Error Caution: odbc_exec() encountered an SQL error: [Microsoft][ODBC Microsoft Access Driver] Syntax error in INSERT INTO statement., SQL state 37000 in SQLExecDirect in E:\DEP\Prog\PHP6\starcraft\starcraft\personnage_trai ...

phphtmlmysqlsqlsql-server

The font in my Next.js / Tailwind CSS project starts off bold, but unexpectedly switches back to its original style

I recently integrated the Raleway font into my minimalist Next.js application with Tailwind CSS. I downloaded the font family in .ttf format and converted it to .woff2, but I'm having trouble changing the font weight using custom classes like font-bol ...

javascriptcssfontsnext.jstailwind-css

The dropdown menu on my HTML form is causing a problem by saving null values to the MySQL database

Everything in the form is functioning correctly except for the grade field, which is returning null values. Below is the HTML code: <body> <form action="/out" method="post"> <label for="grade">Grade:&emsp;&emsp;& ...

pythonhtmlmysqlflask

Provide solely the specified content range

While working with Node.js, my goal is to develop a video server that can serve a specific portion of a larger media file. Thanks to this gist, I have successfully created a video server and integrated it with an HTML5 video player using: <video contr ...

javascripthtmlnode.jsvideoheader

Is it possible to modify the text depending on the chosen option from the dropdown menu

When a user selects "First Name" from a select box, I want the placeholder text 'Enter your First Name' to appear next to the textbox. Below is a snippet of my code: HTML: <select id="selectionType"> <option value="-1">Select One< ...

javascriptjqueryhtmlplaceholder

How can I center two images using a hover effect in WordPress?

When the mouse hovers over an image, it changes to another image. Everything works smoothly except for one issue - the image is not centered. Below is the code I am currently using: HTML: <figure> <a> <img class="hover" src="na ...

htmlcss

Can an unordered list be nested inside an inline list item in HTML or XHTML?

Take note that the li with child ul is set to display:inline - example code provided below <style type="text/css"> ul.nav_main li { display: inline } ul.nav_submenu li { display: block } </style> <ul class="nav_main"> <li>I ...

htmlcss

In certain cases, webkit browsers may conceal LI A (display:block) elements

I have created a unique menu design that is based on the classic 'ul li' structure, but with 'a' elements set to display:block for precise positioning and sizing. There is also some transform:rotate applied, but this does not affect the ...

cssgoogle-chromemenusafariwebkit

hide input type with minimal display

Can someone help me find the less equivalent to this css code snippet? I'm not familiar with less and this code is part of a larger global css file that includes generated code from all less files. input[type="checkbox"] { display: none; } Any a ...

cssless

Creating a Stylish Navigation Bar with Bootstrap4 - Organizing Elements for Just the Right Look

I am trying to organize my content within a navbar into 3 different 'columns'. I want a logo on the left, some navigation items in the center, and the last element ("Get The App") on the right, but I am facing some challenges. Below is my code s ...

htmlcssbootstrap-4frontendnavbar

Expanding scrollable row implemented with CSS grid

How can I create a CSS grid with a single column and two rows? I want the first row to expand when there is space and to scroll when there is no space, while keeping the second row at the bottom of the div. I attempted using display: flex; in the first r ...

htmlcssflexboxcss-grid

Rest assured, with Ajax Security, your protection is in good

I am currently developing a browser game that heavily utilizes AJAX instead of page refreshes. The combination of PHP and JavaScript is being employed for this project. However, during the course of my work, I became aware of the potential security vulnera ...

phpjavascriptjqueryhtmlajax

What is the best way to style odd and even divs in CSS?

I am struggling with applying different CSS styles to the odd and even divs in my code. The current implementation I have does not seem to be working as expected. I specifically want the styling to target only the direct children of the div, rather than an ...

htmlcsscss-selectors

The span created by jQuery does not automatically focus on the lightbox image

I am currently working on a jQuery script that generates a lightbox span when the drop-down menu is changed. My objective is to display an image when the drop-down menu changes and allow users to click on the image to open the lightbox on the screen. The ...

jqueryhtmllightbox

Is there a way to preserve the HTML template code as it is when saving it in a cell?

Looking to store an HTML email template in a Google Sheet cell, but running into formatting issues. The code resembles this example: See sample Email HTML code The problem arises when pasting the complete email template HTML code in a cell. Upon copying ...

htmlgoogle-sheetsgoogle-sheets-formula

Guidance on incorporating static files with Spring MVC and Thymeleaf

I'm seeking guidance on how to properly incorporate static files such as CSS and images in my Spring MVC application using Thymeleaf. Despite researching extensively on this topic, I have not found a solution that works for me. Based on the recommenda ...

javacssspringspring-mvcthymeleaf

Is it possible to activate a block display for an article based on the class value when a radio

Here is the HTML code snippet I'm working with: <div id="contentapp"> <input type="radio" name="menu" id="interest" checked> <input type="radio" name="menu" id="about"> <div id="tab"> <label for="intere ...

htmlcss