Add Padding Without Changing Overall Width

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

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>

Padding within inputs breaks width 100%

Using CSS3 you can use the property box-sizing to alter how the browser calculate the width of the input.

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

You can read more about it here: http://css-tricks.com/box-sizing/

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

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.

Adding padding change size of containing div even when using box-sizing: border-box;

Put it into a container

<button id="btn">Click me to add more padding</button>
<div class="button-container">
    <div id="button">
        <div id="label">
            Click me!
        </div>
    </div>
</div>

CSS

* {
  box-sizing: border-box;
}  

.button-container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}    

#button {
  width: 100%;
  height: 100%;
  background-color: red;
}  

#label {
  font-size: 50px;
}

Add padding to form input without changing the form size

You may want to use CCS box-sizing

That will include the border and padding to the elements width

* { 
  box-sizing: border-box;
}

be careful with the * you can also add box-sizing: border-box; to only the elements needed.

---

Related Topics