Why my model box doesn't have the dimension of the line height with padding=0 and marging =0?-CodePudding

I'm working with CSS/HTML. I'm using Bootstrap 4.
In a line of menu, I want the box the same size as the font-size. I put 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>

If I read the developer tools, the font-size is 16px, the padding and margin are 0, but the model box is 50.4333×21

I have the same behavior in different locations...

CodePudding user response：

AFAIK, there isn't a way to dynamically do this. I just added position: absolute and set a smaller height.

.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>

You'll notice that there is still one pixel at the top where there is still some background

CodePudding user response：

Well, I found an answer ! At the beginning of my css file, I put a call to Google api fonts. I copied this call from the site I'm trying to copy :

@import url(http://fonts.googleapis.com/css?family=Oxygen:400,300,700);

It' quite &ncient (seven years), and, with this ancient call, the effect is exactly what I'm hoping... And, workin with my browser's Developper tools, I read that's ancient and I use the new from Google :

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

And, with that one, I have the ugly effect !