Problem with box-sizing

Question

Navigation

#1 by (2 votes)

0

I have a input and I would like to put a box-sizing because I will use padding-left and would not like to move the element width.

My HTML:

<div class="contato">
  <form>
    <input type="text" />
  </form>
</div>

My CSS:

.contato input {
    width: 480px;
    height: 50px;
    background-color: #e9e9e9;
    padding-left: 15px;
    box-sizing: padding-box;
}

box-sizing is not working, as shown:

css

asked by anonymous 02.12.2014 / 20:22

1 answer

How to collapse keyboard when cancel search button is clicked? Capture Video and Audio

score 2 · Accepted Answer

I think you can use box-sizing: border-box; , which explains why I think this is the solution. The MDN description says:

border-box
Width and height include padding and border but not margin
The width and height include the padding and border, but not the margin.