box-sizing doesn't works on li with inline-block

Question

I don't know why, but only on my footer with li in inline-block and border-top on active class, my box-sizing : border-box doesn't work.

When the class is active, there are a border-top, and we see a gap on the bottom.

Here an exemple :

* { box-sizing: border-box }
#header{
 position:absolute;
 top:0;
 right:0;
 left:0;
 background-color:#333c45;
 height:60px;
 line-height:60px; 
}
#corp{
 position:absolute;
 top:60px;
 bottom:60px;
 right:0;
 left:0;
 background-color:#CDCDCD;
}
#footer{
 position:absolute;
 bottom:0;
 right:0;
 left:0;
 background-color:#333c45;
 height:60px;
 line-height:60px;
  
}
#footer li{
 display:inline-block;
 width:45%;
}
ul{
 margin:0;
 padding:0;
}
.active{
 color:#05FF01;
 border-top:2px solid #05FF01;
}

<html>
<head>
</head>
<body>
<div id="header">
test 
</div>
<div id="corp">
</div>
<div id="footer">
<ul>
<li class="active">boutton 1</li>
<li>boutton 2</li>
</ul>
</div>
</body>
</html>

How can I solve this problem ?

Thank you !

I read this question 3 times and still have no idea what the issue is — Huangism, Feb 02 '18 at 16:14

Alohci · Answer 1 · 2018-02-02T16:24:53.487

0

box-sizing determines how the specified values for the height and width properties are interpreted, but your li elements do not have a height property. Their heights are just the sum of the top-border height and the content box height which is auto-computed from the line-heights.

edited Feb 02 '18 at 16:24

answered Feb 02 '18 at 16:17

Alohci

78,296
16
112
156

score -1 · Accepted Answer · answered Feb 02 '18 at 16:09

-1

Add overflow:hidden to the body. It will prevent any vertical scrollbar.

Also, as a side note, IMO making a layout with every element in position:absolute is a terrible idea and you'll quickly get headaches.

* {
  box-sizing: border-box
}

body {
  overflow: hidden;
}

#header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background-color: #333c45;
  height: 60px;
  line-height: 60px;
}

#corp {
  position: absolute;
  top: 60px;
  bottom: 60px;
  right: 0;
  left: 0;
  background-color: #CDCDCD;
}

#footer {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #333c45;
  height: 60px;
  line-height: 60px;
}

#footer li {
  display: inline-block;
  width: 45%;
}

ul {
  margin: 0;
  padding: 0;
}

.active {
  color: #05FF01;
  border-top: 2px solid #05FF01;
}

<html>

<head>
</head>

<body>
  <div id="header">
    test
  </div>
  <div id="corp">
  </div>
  <div id="footer">
    <ul>
      <li class="active">boutton 1</li>
      <li>boutton 2</li>
    </ul>
  </div>
</body>

</html>

answered Feb 02 '18 at 16:09

Jeremy Thille

26,047
12
43
63

but its a workaround. If I want to apply widht:50% to my li, without box sizing it's not possible. – Deubow Feb 02 '18 at 16:17
Why would you apply overflow hidden to body when it should be applied to the `ul` – Huangism Feb 02 '18 at 16:19
@Huangism Because it removes the scrollbar. Anyway, as I said, the whole layout made of `position:absolute` elements is bound to fail IMO. But I'm not going to develop a whole layout here, am I? :) – Jeremy Thille Feb 02 '18 at 16:21
You add a height to the `ul` and add overflow hidden, problem solved. Adding overflow hidden to body can cause other issues or just add overflow hidden to `#footer` – Huangism Feb 02 '18 at 16:25
I believe you're right. Be my guest then, please add your own answer :) – Jeremy Thille Feb 05 '18 at 08:44

box-sizing doesn't works on li with inline-block

2 Answers2