How to Prevent the Padding Property from Changing Width or Height in CSS

How to change a DIV padding without affecting the width/height ?

Solution is to wrap your padded div, with fixed width outer div

HTML

<div class="outer">
    <div class="inner">

        <!-- your content -->

    </div><!-- end .inner -->
</div><!-- end .outer -->

CSS

.outer, .inner {
    display: block;
}

.outer {
    /* specify fixed width */
    width: 300px;
    padding: 0;
}

.inner {
    /* specify padding, can be changed while remaining fixed width of .outer */
    padding: 5px;
}

Prevent padding from increasing size

Replace it with margin by adding an extra div

div.box {
  height: 0;
  overflow: hidden;
  background: tan;
}

div.box div {
  margin: 12px;
}

<div class="box">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

!important width changes for no reason

You should be familiar with box-sizing property which determines how the width and height are calculated, in chrome the default value for box-sizing set on a button is border-box

border-box: The width and height properties includes content, padding and border

Let's now talk about your case:

Content:

<button type="button" class="dot"></button>

The button has no text which means the width of it's content is 0px

Padding:

Default padding on the button applied by the user agent(chrome in this case) is

padding-top: 1px;
padding-right: 6px;
padding-bottom: 1px;
padding-left: 6px;

Border:

we only care about the width of the border

Default border on the button applied by the user agent(chrome in this case) is

border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;

we'll talk about the width alone, because it's pretty much same thing for the height

Without applying any styles, let's sum it all up

left border 2px + left padding 6px + content 0px + right padding 6px + right border 2px

So the overall width of a button by default will be 16px.

Now when you say width:9px you explicitly setting the width in which border+padding+content should live in, but their width is wider so it expands.

Why doesnt it happen on 15x15 tho.. (becomes 16x15 as if it has padding to fill till 16px on

That's because 16px is the exact amount of space border+padding+content need to live, that's why you see no change.

Now if you set the width to be wider than 16px what will change is the content's width because border get set width border property and padding width padding property.

Solution

So to fix this we need to reset those predefined styles padding and border

console.log(document.querySelector('button').getBoundingClientRect().width)

button {  width: 9px;  padding: 0;  border:none;}

<button></button>

CSS: Padding vs. Height

Both height and padding inherently control the height of an element. I would have to disagree that using padding is wrong, but rather depends on the specific use case.

Use height when you need a fixed container size.

PRO: Useful for when you don't want the container to stretch vertically.
CON: Becomes brittle as you change properties like font-size, margin, padding, etc.
- Increasing sizes can cause contents to hide or overflow.
- Changing a font-size, for example, can cause a cascade change (you have to also change the margins/padding, or size properties of sibling/child elements.

Use padding when you don't need a fixed container height, but want to add whitespace.

PRO: Easier to change font-sizes, margins, paddings, and add additional content to the container that may increase the container's vertical size.
CON: Adding content/increasing size properties will cause the container to stretch vertically, which is undesirable in some scenarios.
- Not good for scenarios where vertical space is limited or needs to be controlled.

Use min-height and max-height for a hybrid approach.

PRO: Forces a fixed height, but allows content to grow dynamically until it reaches that min or max.
CON: You still have the "cascade" update problem with size properties and added content once you hit the min or max.

How to make an element width: 100% minus padding?

box-sizing: border-box is a quick, easy way to fix it:

This will work in all modern browsers, and IE8+.

Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.