Problem with box-Sizing

Asked

Viewed 154 times

0

I have a input and would like to put a box-sizing 'cause I’m gonna use padding-left and would not like to touch the width of the element.

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;
}

The box-sizing is not working as per image:

inserir a descrição da imagem aqui

css

  • Is not the box-sizing: border-box; what do you want to use? the padding-box is not yet supported by almost any browser...

  • I didn’t know. It’s the padding-box even, as I would like the 15px of padding not to be added to the width of the element.

  • 2

    In this case it is the same as the border-box. Give a look here I think the behavior/description with the padding is the same.

  • If adding an image to the problem would be good, in case I’m not quite understanding the problem...

  • 1

    Ahh, you already clarified my doubt, I did not know that the border-box would suit my need. Thank you very much.

1 answer

2


The padding-box is not yet supported by almost any browser.

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

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

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.