How to Change a Div Padding Without Affecting The Width/Height

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

How apply padding in HTML without increasing the div size?

Adding an inner div is, more or less, a good solution. There's the box-sizing property, but it lacks support.

Here's an article on the subject:

http://www.quirksmode.org/css/box.html

And here's a polyfill (patch) for older IE versions -- although I'm not sure how it affects performance; I'd recommend using it carefully.

https://github.com/Schepp/box-sizing-polyfill

padding increases width and height of div

You can use CSS3 box-sizing property to do this:

box-sizing: border-box;

http://css-tricks.com/box-sizing/

Supported in IE8+ but some browsers may require a prefix:

http://caniuse.com/css3-boxsizing

How do I add padding without affecting container?

You should use the CSS property box-sizing.

Setting this to border-box. It will count the padding and the border as part of the width.

So, in the example below. The width and height of the element will continue being 100px even with the 25px padding and 1px border

.my-input-element {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    padding: 25px;
    border: 1px solid #000;
}

DIV padding interfering with width

Simply keep the element a block element and you won't need width:100% or box-sizing:border-box (by the way it's good to keep it to avoid any future issue related to padding/border combined with width)

.entryrow {  position: relative;  height: 100px;  background: linear-gradient(#2c647b, #191654);  padding: 5px;  margin: 5px;  border: 1px solid #ccc;  cursor: pointer;}

<div style="background:black;overflow:hidden">  <div class="entryrow">    Blubb  </div></div>

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.

padding is getting added to width of div

First of all you need to learn CSS box-model

Sample Image

This states that whatever padding, border, margin you add to you element does count outside it, so for example the element is of 200px width and 100px height, if you add padding say 5px than the width and height will be 205px and 105px respectively, so inorder to workaround with this you need to use CSS3 box-sizing property, but as still it is CSS3 property and if IE is the main thing you want to supprt, I suggest you to resize the elements according to your needs

So for example a div with these styles

div {
   height: 100px;
   width: 200px;
   padding: 5px;
}

You can re-size the above as

div {
   height: 95px;
   width: 195px;
   padding: 5px;
}

CSS3 box-sizing Reference

How to Change a Div Padding Without Affecting The Width/Height