ps0604 ps0604 - 1 month ago 16
CSS Question

CSS height not taken from styles sheet

I have set height 28px in my css sheet for specific input fields, however the browser sets 30px (see picture). Why is that and how to fix this?

enter image description here

This is the class definition:

.filter-cell > .form-control {
border: 1px solid rgb(169, 169, 169) !important;
height: 28px !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
padding: 2px 3px 2px 3px !important;
}

Answer

Your problem is the box-sizing value that consider or not the padding in the size of your element. Try to add box-sizing:border-box; to your element.

Read this to know more about box-sizing.

Working Demo.

P.S. to change the box-sizing for the whole document (as Bootstrap do) use:

* {
  box-sizing: border-box;
}

EDIT

Also border increase the size of the element so you'll need to set the height considering the border size, in your case:

border: 1px solid rgb(169, 169, 169) !important;
height:26px;

div {
  width:200px;
  height:28px;
  background-color:red;
  padding:1px 0;
  margin-bottom:10px;
}
.content-box {
  box-sizing:content-box;
}
.border-box {
  box-sizing:border-box;
}
.border {
  padding:0px;
  border: 1px solid #000;
}
Ispect those two divs:
<div class="content-box">

</div>

<div class="border-box">

</div>

<div class="border">

</div>