Reply To: Border Offsets Centering

[MikesBarto2002]

I think you have made this a little more complicated than it needs to be.

My advice would be not to style from the inside out, but from the outside in. This means start with your outer-most tag, and then move down the tree to the child elements. This means that instead of needing to put padding on each input tag, you are putting padding on the container that is holding the input tags.

Also, Paulie_D nailed it with border-sizing. Normally when you apply a width to a tag, that width does not include the border of that tag. With border-sizing: border-box, the width now includes the border, so you don’t ever have to make those weird calculations again. Paul Irish suggests putting it on every element with the catch-all * {border-sizing: border-box;}. If you aren’t using a preprocessor or Autoprefixer, for now you will also have to put the -webkit version in as well:

* {
  -webkit-border-sizing: border-box;
  border-sizing: border-box;
}

Here’s a Codepen as an example.