CSS3 calc() function not working correctly

Question

I am using calc() to measure the available width of the input after subtracting the width of the sibling elements.

<div class="containero">
  <button class="noey">No</button>
  <input  class="inpoot" />
  <button class="yeso">Yes</button>
</div>

And I have the following CSS.

.containero {
    width: 100%;
    background-color: yellow;
    display: inline-block;
    box-sizing:border-box;
}

.noey, .yeso {
  border: 1px solid red;
  width: 30px;
  height: 30px;
  text-align: center;
  vertical-align: middle; 
  display:inline-block;
  color: red;
  padding:0px;
  box-sizing:border-box;

}


.inpoot {
  height: 31px;
  margin: 0 5px;
  display:inline-block;
  width: calc(100% - 70px);
  box-sizing:border-box;
}

Now as per my calculations, the element .inpoot should fit in nice and cosy if I set its width to calc(100% - 70px); taking into account the widht of 30px for both the siblings, and then its own margin of 10px. But to my utter dismay, ~~life isn't easy~~ its not working as expected. The last sibling, .yeso is being pushed to next line.

DEMO 1

BUT!!! if I set the .inpoot width to calc(100% - 82px) voila!! it works, but I am flabbergasted where on GOD's beautiful earth, is that additional width coming from?

DEMO 2

Marcos Pérez Gude · Accepted Answer · 2016-11-17 11:34:29Z

2

You need to know that between inline and inline-block elements, the spaces matters. So if you have a whitespace between two inline elements, it takes account in the total calculation. To avoid this there are a lot of tricks, but the simplest is the following:

 .containero {
       font-size: 0;
 }

Add this property in your CSS and it works. Working example:

.containero {
    font-size: 0;
    width: 100%;
    background-color: yellow;
    display: inline-block;
    box-sizing:border-box;
}

.noey, .yeso {
  border: 1px solid red;
  width: 30px;
  height: 30px;
  text-align: center;
  vertical-align: middle; 
  display:inline-block;
  color: red;
  padding:0px;
  box-sizing:border-box;

}


.inpoot {
  height: 31px;
  margin: 0 5px;
  display:inline-block;
  width: calc(100% - 70px);
  box-sizing:border-box;
}

<div class="containero">
  <button class="noey">No</button>
  <input  class="inpoot" />
  <button class="yeso">Yes</button>
</div>

And please, don't use codepen.io since we need an account to modify the code and share it. It's better jsfiddle.net and the best choice is the integrated stacksnippets (like mine)

edited Nov 17, 2016 at 11:34

answered Nov 17, 2016 at 11:16

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Marcos Pérez Gude Over a year ago

@MohdAbdulMujib there's not a bug, is a feature. Spaces between inline elements are physically there. So it takes its space. It's not a bug, it's wide refferenced along internet. Search about inline-block and spaces. Good luck!

Marcos Pérez Gude Over a year ago

You can check this answer as correct. Thank you! :)

Mohd Abdul Mujib Over a year ago

:D yeah I was waiting for the 5-mins timeout, then got caught up in something. Nonetheless thanks for reminding, here you go, you deserve it. :)

Collectives™ on Stack Overflow

CSS3 calc() function not working correctly

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related